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本身，下面分為兩個三角形是用偽類，具體情況看個人需求。

總結

以上是生活随笔為你收集整理的CSS3 linear-gradient实现三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。