css倾斜的箭头框与透明背景

Question

基本上我想在CSS中创建的形状，高度为192，我希望背景透明。

我可以在CSS中执行此操作吗？如果是这样，可以使用SVG更聪明吗？

由于

Answer 1

线性渐变可能吗？

＆＃13;

＆＃13;

div {
margin-top:50px;/*snippet button ! */
  padding: 0.5em 3.2%;
  font-size:20px;
  background: 
    linear-gradient(60deg,  transparent 3%, #49FFCE 3%, #49FFCE 97%, transparent 97%) no-repeat top, 
    linear-gradient(-60deg, transparent 3%, lime 3%, lime 97%, transparent 97%) no-repeat bottom;
  
  background-size: 100% 50%;
}

＆＃13;

<div>test
</div>

＆＃13;

＆＃13;

＆＃13;