CSS中,定义三角形可以用到伪元素::after或::before,这些元素是能够在指定的元素之前或之后插入新的元素。/* 建立一个三角形 */ .triangle { width: 0; heigh
CSS中,定义三角形可以用到伪元素::after或::before,这些元素是能够在指定的元素之前或之后插入新的元素。
/* 建立一个三角形 */ .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #000; }
上述代码的意思是建立一个等腰直角三角形,其中,border-top和border-bottom用来定义三角形的高度,border-right则是定义三角形的宽度与颜色。
如果想要得到等腰三角形,只需要将其中一个border的宽度值改为0即可。
/* 建立一个等腰三角形 */ .triangle { width: 0; height: 0; border-top: 50px solid #000; border-bottom: 50px solid transparent; border-right: 50px solid transparent; }
当然,我们也可以将三角形的形状进行调整,比如想要得到一个向上的三角形:
/* 建立一个向上的三角形 */ .triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid #000; }
上述代码中,border-left和border-right都定义了一个长度为25px的透明边框,使三角形的左右两侧呈现出直线的形状。border-bottom则定义了三角形的高度,并且设定颜色为黑色。
粉丝
0
关注
0
收藏
0