Q:

css skewed arrow box with transparent background

Basically thats the shape I want to create in CSS, the height is 192 and I want the background to be transparent.
Can I do this in CSS and if so is it smarter to do with SVG maybe?
Thanks

A:

linear-gradient maybe ?

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%;
}
<div>test
</div>

