<div id="div2"> <h2> 2，CSS创建一个三角形 </h2></div> 1. 通过border 处理 ```javascript #box { width: 0px; height: 0px; border: 100px solid; border-top-color: red; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } ``` 2. clip-path裁剪获得 -- 裁剪成各种形状 ~~~ div{ clip-path: polygon(0 100%, 50% 0, 100% 100%);} ~~~ 3. 渐变linear-gradient 实现 ~~~ div { width: 200px; height: 200px; background:linear-gradient(to bottom right, #fff 0%, #fff 49.9%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%); } ~~~ to bottom right 从左上角开始（到右下角）的线性渐变