带有三角形的css矩形

Answer 1

我会尝试使用剪辑路径：

<div class="shape"></div>

.shape {
  width: 250px;
  height: 70px;
 background: linear-gradient(to bottom, #a65bff, #8a2be2);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
  border-radius: 20px;
}

请参阅此处的示例：https://codepen.io/plant996/pen/rNbrQZV 尖头部分的半径很棘手，您还可以使用带有路径的剪辑路径，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path .

希望有帮助！