CSS中可以使用多边形模块来生成各种形状的图形,比如三角形、四边形、五边形、六边形等。/* 生成三角形 */ .triangle { width: 0; height: 0; border-left:
CSS中可以使用多边形模块来生成各种形状的图形,比如三角形、四边形、五边形、六边形等。
/* 生成三角形 */ .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } /* 生成正方形 */ .square { width: 100px; height: 100px; background-color: blue; } /* 生成五边形 */ .pentagon { position: relative; width: 100px; height: 100px; background-color: yellow; } .pentagon:before { content: ""; position: absolute; top: 0; right: -31px; width: 0px; height: 0px; border-top: 31px solid transparent; border-bottom: 31px solid transparent; border-left: 31px solid yellow; } .pentagon:after { content: ""; position: absolute; top: 0; left: -31px; width: 0px; height: 0px; border-top: 31px solid transparent; border-bottom: 31px solid transparent; border-right: 31px solid yellow; } /* 生成六边形 */ .hexagon { width: 100px; height: 55px; background-color: green; position: relative; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 27.5px solid green; } .hexagon:after { top: 100%; width: 0; border-top: 27.5px solid green; }
使用多边形模块可以很方便地实现各种形状的图形,同时也可以使用transform等属性来进一步对图形进行变形和动画效果。
粉丝
0
关注
0
收藏
0