-4

I was wondering how could I make this shape wit css and css only, thanks in advance.

shape

MattAllegro
  • 6,455
  • 5
  • 45
  • 52
gabogabans
  • 3,035
  • 5
  • 33
  • 81
  • 1
    What did you try? Please before asking any question, give a little effort into solving it first and mentioning the steps. – weegee Apr 19 '19 at 17:19
  • With clip-path support is limited https://caniuse.com/#search=clip-path – SuperDJ Apr 19 '19 at 17:44

3 Answers3

1

Have a look into this. 

div {
-webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
background:red;
height:80px;
width:100px
}
<div><div>
Abdul Basit
  • 1,352
  • 1
  • 10
  • 18
0

You can use this :

-webkit-clip-path: polygon(0 79%, 70% 79%, 100% 100%, 0% 100%);
clip-path: polygon(0 79%, 70% 79%, 100% 100%, 0% 100%);

This is a useful website to create the shapes that you want : https://bennettfeely.com/clippy/

Can Oezlemis
  • 169
  • 1
  • 10
0

This way:

.trapz {
  margin: 10px; /* not necessary for the trapezoid */
  width: 300px;
  height: 0;
  border: none;
  border-right: 120px solid transparent;
  border-bottom: 100px solid red
}
<div class="trapz"> </div>
MattAllegro
  • 6,455
  • 5
  • 45
  • 52