2

Here is what I'm trying to create:

enter image description here

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.

HappyHands31
  • 4,001
  • 17
  • 59
  • 109

1 Answers1

6

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

Mech
  • 3,952
  • 2
  • 14
  • 25
  • 1
    `polygon(15% 0%, 100% 0, 85% 100%, 0% 100%);` - this is specifically what I'm looking for, but thanks for sharing that tool and explaining the sequence. – HappyHands31 Oct 04 '20 at 15:35
  • Perfect :) I added a little more to explain the percentages but it looks like you've got that under control :) – Mech Oct 04 '20 at 15:37