How can i make this shape with CSS?

Question

.outer {
  background-color: #FFB4B4;
  padding: 40px;
  text-align: left;
}

<div class="outer"><h1>Lorem Ipsum nkdsdkjdks diosudisuidus</h1><p>At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. </p><button>test</button></div>

How can i make this Shape with only CSS without using extra plugin or javascript or anything. It should work with all major Browsers like Chrome, Mozilla, Safari, IE.

Note: I do not wanna use Shape Image for it.

added some code, but i do not know how to make this shape, that is why asked here. — welcomegkm, Nov 09 '20 at 10:47
This will help you get understand. HTML code `
` CSS code `body {margin:0;}body {height: 100vh;background: linear-gradient(120deg, pink 65%, white 25%)}` — Parth Raval, Nov 09 '20 at 11:00

score 1 · Accepted Answer · answered Nov 09 '20 at 10:49

Despite not being the best way to ask a question I suppose this is what you want.

HTML

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

CSS

.shape {
  width: 80px;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

This will create the shape you want but you can easily get to this result if you do a quick search for shapes in css

How can i make this shape with CSS?

1 Answers1