css border属性制作三角形及“人行道”|

Posted 2020-10-11

一：利用border制作三角形

　　平常，对于一个元素设置border后，显示为下图：

　　空白部分为元素内容部分，四个有颜色部分分别为四条边。

　　当元素设置的宽和高变小，而边框宽度相对比较大时，如下图：

　　代码部分为：

　　可以清楚看出，此时，由于元素还存在宽高，即元素的width≠0，height≠0，则出现了四天边框呈梯形，这是因为两条相邻边框以斜线分界。以border-bottom底部边框为例，其梯形边框的形成是由于左边框、右边框和元素内容区的交界，与上边框无关。

　　当元素的width=0，height=0时，如图：

　　此时，形成了“十字街”图形，出现四个三角形。

　　为了实现只出现一个三角形，以下部三角形为例，需要除去左面、右面、上边的三角形。

 　　下部三角形的形成，是因为左部和右部边框的交界形成的，所以将这两个三角形除去即可得到左部的三角形，至于上部三角形，由于与下部三角形的形成无关，设置其border为0，即不进行设置就行。

　　代码如下：

　　通过将左边和右边的边框设置成透明的（transparent）即可隐藏其边框。形成的三角形如下：

　　可以知道，该三角形的高为50px，长为100px，因此，若需要其他底角角度的三角形，对其border-left、border-right、border-bottom设置其他像素即可。

二：其他简单应用

 　　知道了利用border形成三角形之后，我们可以去完成其他形状图形的制作。比如下图：

　　　　　　

　　可以将其看成一个矩形，在它的左边加了一个无色的三角形，在右边加了一个背景色相同的三角形。

　　代码为：

　　

　　

　　利用position属性给矩形加上了左三角形（.zsj）和右三角形（.ysj）。

　　为了形成“人行道”形式的图形，需要添加多个一样的图形，如下图：

　　　　　　

　　因此，需要将其右浮动或其他方式来完成。

　　这里简单的用右浮动来实现：

　　

　　其html代码为：

　　　　

　　这是一种方法，还可以z-index实现，不过没尝试，哈哈。