CSS形状 – 三角形设计

前端之家收集整理的这篇文章主要介绍了CSS形状 – 三角形设计前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们可以只使用CSS创建以下图像吗?

我能够创建一个直角三角形.但我无法创建这个特定形状的三角形.任何帮助将不胜感激.

直角三角形设计代码

@H_404_9@#triangle,#triangle3 { width: 0; height: 0; border-width: 100px 0 0 100px; border-style: solid; border-color: transparent transparent transparent #ff0033; float: left; } #triangle2,#triangle4 { width: 0; height: 0; border-width: 0 100px 100px 0; border-color: transparent #294fa3 transparent transparent; border-style: solid; float: left; position: relative; left: -100px; } #triangle3 { position: relative; left: -100px; } #triangle4 { position: relative; left: -200px; /*specifically for 4*/ } @H_404_9@
最佳答案
这可以使用带有:pseudo-element和transform:skew()的单个div元素.

@H_404_9@div,div:after { position: relative; width: 0; height: 0; border-right: 200px solid #2B3FA5; border-bottom: 75px solid #FF0000; transform: skew(-35deg); margin-left: 30px; } div:after { position: absolute; content: ''; left: 200px; transform: skew(0deg); margin-left: 0px; } @H_404_9@

猜你在找的CSS相关文章