CSS3 linear-gradient实现三角形

来源:转载

html代码:

<div class="box"></div>

css代码:

.box { position: relative; background: red; height: 200px;}.box:before,.box:after { content: ""; position: absolute; height: 200px; width: 50%; bottom: -200px;}.box:before { left: 0; background: linear-gradient(to right top,transparent 50%,red 50%,50%);}.box:after { right: 0; background: linear-gradient(to left top,transparent 50%,red 50%,50%);}

效果图如下:
上面为.box本身,下面分为两个三角形是用伪类,具体情况看个人需求。

分享给朋友:
您可能感兴趣的文章:
随机阅读: