How to create arrow shape header using css?

Question

I'm trying to create a curved header

using css, but not sure how to get it right. If you have seen this before, can you point me into the right direction. I was playing around with SVG effect, but maybe there is a better way to do this.

Answer 1

You can use css clip-path to get shapes like this.

.parent {
  width: 100%;
  height: 200px;
  background: red;
}

.child {
  clip-path: polygon(100% 0, 100% 30%, 50% 50%, 0 30%, 0 0);
  background: #000;
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="child"></div>
</div>