css 透明背景的斜箭头框

Question

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

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

谢谢

Answer 1

也许是线性渐变？

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>

css 透明背景的斜箭头框

css skewed arrow box with transparent background

css

shape