CSS三角是我们在制作网页过程中常常使用的一种形状,并且高度可定制化。以下是一些方法来实现css三角://方法一:采用border属性,用透明色清空不需要的部分 .triangle { width:
CSS三角是我们在制作网页过程中常常使用的一种形状,并且高度可定制化。以下是一些方法来实现css三角:
//方法一:采用border属性,用透明色清空不需要的部分 .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } //方法二:使用:before或:after伪元素进行css三角的实现 .triangle:before { content: ""; position: absolute; top: 0; left: 0; border-width: 0 100px 100px 0; border-color: transparent red; border-style: solid; } //方法三:使用transform旋转属性与绝对定位来实现 .triangle { width: 100px; height: 100px; background-color: red; position: relative; } .triangle:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 100px 100px; border-color: transparent transparent red transparent; transform: rotate(45deg); }
以上是三种实现css三角的方法,根据你的需求选择其中一种即可。另外,需要注意的是因为不同浏览器渲染的方法不同,所以以上方法可能不完全兼容。
粉丝
0
关注
0
收藏
0