-2

enter image description here

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

randomKek
  • 1,108
  • 3
  • 18
  • 34
  • You may find the approach used in my answer [here](http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665) also helpful. – Harry Mar 04 '16 at 09:51

1 Answers1

2

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129