Slant Left and Right Side of Div at Slight Angle With CSS

Question

Here is what I'm trying to create:

And I should be able to do it with clip-path: polygon, but I'm not understanding the documentation.

What are the properties, exactly, for this shape?

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); - top, left, bottom, right? What is the 50%? What is the 0? What do they stand for? The docs don't seem to say, unless I'm missing it.

I found some code from another article that's resulted in the following:

.inner-container-top {
  width: 130px;
  font-size: 12px;
  font-weight: 600px;
  background: #8b000a;
  color: #ffffff;
  padding: 7px;
  clip-path: polygon(0% 100%, 100% 100%, calc(100% - 30px) 0%, 0% 0%, calc(100% - 30px) 0%, 0% 0%);
}

<div class="inner-container-top">HELLOWORLD</div>

But again I don't understand why it's doing this. I will need to flip it so that it's slanted in the opposite direction, and create a slant on the left side as well. Please help if you can.

Answer 1

The sequence for this clip-path is top left, top right, bottom right, bottom left.

The percentages are the X,Y of the container that contains the polygon.

Use tools at your disposal. Work smarter, not harder :)

https://bennettfeely.com/clippy/

clip-path: polygon(31% 55%, 100% 55%, 75% 100%, 0% 100%);