complicated edges in CSS3 border shape

Question

I would like create edges as on picture. I have no idea what kind of phrase to look for. Or how to do it…

Answer 1

The most crossbrowser way I see for this task is using skewed pseudoelements:

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);
}

<div></div>

But I would use SVG for this

<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>

Also if you don't care about supporting IE/Edge you can use clip-path:

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

<div></div>