css - CSS 中带有圆 Angular 三 Angular 形/箭头的容器

Question

我试图给容器的背景一种圆箭头的感觉。我希望箭头始终拉伸(stretch)到全宽并能够动态调整高度(如有必要，我可以使用 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>