CSS3边框形状的复杂边缘

Question

我想在图片上创建边缘。我不知道要寻找什么样的短语。或者怎么做......

Answer 1

我为此任务看到的最常用的浏览器方法是使用偏斜的伪元素：

＆＃13;

＆＃13;

div {
  padding-top: 100px;
  height: 100px;
  background-color: #f1c11a;
  background-clip: content-box;
  overflow: hidden;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  right: 50%;
  top: 0;
  width: calc(100 * (1vw + 1vh - 1vmin)); /* Fallback for IE due to vmax not supported */
  width: 100vmax;
  height: 100px;
  background-color: inherit;
  transform: skewX(70deg);
  transform-origin: bottom right;
}

div:after {
  left: 50%;
  transform: skewX(-70deg);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

但我会使用SVG

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
  <polygon points="0,0 10,0 50,10 90,0 100,0 100,100 0,100" fill="#f1c11a" />
</svg>

＆＃13;

＆＃13;

＆＃13;

此外，如果您不关心支持IE / Edge，您可以使用clip-path：

＆＃13;

＆＃13;

div {
  height: 100px;
  background-color: #f1c11a;
  clip-path: polygon(0% 0%, 10% 0%, 50% 50%, 90% 0%, 100% 0%, 100% 100%, 0% 100%);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;