2017-09-15 37 views

回答

0

不太清楚你打算如何使用它,但是有可以创建多边形几种不同的方式。

这里有两种方法:

  1. 使用background: linear-gradient()并与多家梯度,角度打和停止位置。
  2. 使用::after伪元素,并迫使其成为一个不等边三角形与边框颜色招

.polygon { 
 
    background: linear-gradient(-14deg, #ddd 21%, transparent 0), linear-gradient(30deg, #ddd 15%, gold 0); 
 
    height: 300px; 
 
    width: 500px; 
 
} 
 

 
.polygon2 { 
 
    background: gold; 
 
    width: 500px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 

 
.polygon2::after { 
 
    content: ''; 
 
    border-left: 150px solid transparent; 
 
    border-right: 350px solid transparent; 
 
    border-top: 80px solid gold; 
 
    position: absolute; 
 
    height: 0; 
 
    top: 100%; 
 
    width: 0; 
 
}
<div class="polygon"></div> 
 

 
<hr> 
 

 
<div class="polygon2"></div>

+0

工作太棒了!谢谢! – Edward

+0

@爱德华没问题!如果答案是有用的,并且回答您的问题,可以随时上传并接受它 – itodd