如何用css3绘制渐变彩色梯形？

我需要做一个像图像一样的梯形，但我不知道如何。如何用css3绘制渐变彩色梯形？

我想用下面的CSS来做到这一点，但我坚持：

#trapezoid { 
    width: 100px; 
    height: 0; 
    border-top: 50px solid #82E81B; 
    border-left: 0px solid transparent; 
    border-right: 30px solid transparent; 
}

如果你有一个很好的方法，使用CSS来实现它，请告诉我。

来源

2016-09-26 Liviu Costache

这不仅是梯度，一些3D转换必须在这里发生。没有已知的角度和大小就很难制作它。 – smnbbrv

也许[这个答案]（http://stackoverflow.com/a/39697859/4575054）可以帮助你做出梯形。 – Fralec

看看这个：

#div1 { 
 
    position: relative; 
 
    height: 150px; 
 
    width: 50px; 
 
    margin: 50px; 
 
    padding: 0px; 
 
    -webkit-perspective: 150px; /* Chrome, Safari, Opera */ 
 
    perspective: 200px; 
 
} 
 

 
#div2 { 
 
    padding: 40px 70px; 
 
    position: absolute; 
 
    border-radius:2px; 
 
    -webkit-transform: rotateY(-30deg); /* Chrome, Safari, Opera */ 
 
    transform: rotateY(-30deg); 
 

 
    box-shadow:3px 0px 6px rgb(19,83,60),inset 1px 1px 2px 2px rgba(241,251,50,1); 
 
background-image:-webkit-linear-gradient(to right, #b7f915, #b7f915,#6fd00c); 
 
    background-image:linear-gradient(to right,#b7f915,#b7f915, #6fd00c); 
 
}

<div id="div1"> 
 
    <div id="div2"></div> 
 
</div>

来源

2016-09-26 10:16:55 Anan

这太棒了！谢谢！ –

使用镶嵌阴影边框灯的可怕想法。它甚至可以在里面使用文本 –

留下的阴影和渐变给你。请享用。

#trapezoid { 
 
    border-top: 50px solid #82E81B; 
 
    border-left: 0px solid transparent; 
 
    border-right: 30px solid transparent; 
 
    height: 30px; 
 
    background: transparent; 
 
    width: 100px; 
 
    perspective-origin: 0% 50%; 
 
    transform: perspective(600px) rotateY(-45deg); 
 
    position: relative; 
 
}

<div id="trapezoid"></div>

来源

2016-09-26 09:50:26

如何用css3绘制渐变彩色梯形？

回答

相关问题