多角度的css形状，有可能吗？

Question

大家好，请考虑下面的图片

是否可以用css创建这样的形状？如果是这样，你能给我一些线索或一个例子吗？

Answer 1

试试此代码

.cshape {
  height: 300px;
  width: 250px
  background: #92a8eb;
  background: -moz-linear-gradient(left, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
  background: -webkit-linear-gradient(left, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
  background: linear-gradient(to right, #92a8eb 0%, #96c0ea 50%, #9ce4e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92a8eb', endColorstr='#9ce4e8', GradientType=1);
  -webkit-clip-path: polygon(0 0, 100% 0, 37% 28%, 0 25%);
  clip-path: polygon(0 0, 100% 0, 37% 28%, 0 25%);
}

<div class='cshape'>

</div>

Answer 2

我试过这个，检查一下

＆＃13;

＆＃13;

#chevron { 
position: relative;
text-align: center; 
padding: 12px; 
margin-bottom: 6px; 
height: 60px; width: 100%; 
}
#chevron:before { 
content: ''; 
position: absolute; 
top: -32px; 
left: 0; 
height: 140px; 
width: 51%;  
background: -webkit-linear-gradient(left, #9cb0ed, #a1ceec); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,#9cb0ed, #a1ceec); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #9cb0ed, #a1ceec); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #9cb0ed, #a1ceec); /* Standard syntax (must be last) */ 
-webkit-transform: skew(0deg, 6deg); 
-moz-transform: skew(0deg, 6deg); 
-ms-transform: skew(0deg, 6deg); 
-o-transform: skew(0deg, 6deg); 
transform: skew(0deg, 6deg); 
} 
#chevron:after { 
content: ''; 
position: absolute; 
top: -110px; 
right: 90px; 
height: 140px; 
width: 35%;  
background: -webkit-linear-gradient(left, #a1ceec, #9cb0ed); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #a1ceec, #9cb0ed); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #a1ceec, #9cb0ed); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #a1ceec, #9cb0ed); /* Standard syntax (must be last) */ 
-webkit-transform: skew(0deg, -6deg); 
-moz-transform: skew(0deg, -40deg); 
-ms-transform: skew(0deg, -40deg); 
-o-transform: skew(0deg, -40deg); 
transform: skew(0deg, -40deg); 
}

＆＃13;

<div id="chevron"></div>

＆＃13;

＆＃13;

＆＃13;