CSS中带圆角三角形/箭头的容器

Question

我试图给容器的背景一个圆润的箭头感觉。我希望箭头始终被拉伸到全宽并且能够动态调整高度（如果需要，我可以使用javascript调整高度）。

以下是一个例子：

这可以使用CSS吗？

如果没有，我应该如何完成它 - SVG背景图片？

Answer 1

您可以使用伪元素来实现此形状。

FIDDLE

div {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  padding: 35px 100px;
}
div:before {
  content: '';
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 20px;
  position: absolute;
  transform: rotate(-56deg) skewY(25deg);
}
div:after {
  content: '';
  width: 334px;
  left: 33px;
  top: 134px;
  z-index: 1;
  height: 40px;
  background: #ccc;
  position: absolute;
}

<div></div>