How do I make irregular shape in CSS

Question

I wanna make this shape ( the black color one, on the left side ) : https://www.awesomescreenshot.com/image/10535419?key=066637f6e5d498e80eb0bdee9eee8372

My idea is to create a triangle down shape and scale it, then use transform:translate() to move the shape. Is there any better or easier way to got this shape?

score 2 · Accepted Answer · answered Jul 12 '21 at 09:28

Use clip-path this website is a great tool to help you get the hang of it, in your case you would need something like this

.shape {
width : 250px;
height : 400px;
background-color : #1a1a1a;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}

<div class="shape">
</div>

How do I make irregular shape in CSS

1 Answers1