How can I create a shape like this?

user_5675438 0
Viewed 38

How can I create this with css?

enter image description here

Thanks for any help.

What I've tried:

.box {
  background: purple;
  padding: 20px;
  clip-path: polygon(
    70% 100%,
    100% calc(100% - 3vw),
    100% 0,
    0 0,
    0 calc(100% - 3vw)
  );
}
<div class="box"></div>

sass css
1 Answers

try two clip-path:

.box {
  height:100px;
  position:relative;
}

.box::before,
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.box::before {
  bottom:0;
  background:red;
  clip-path:polygon(0 0,100% 0,100% 60%,85% 100%,0 40%);
}

.box::after {
  bottom:20%;
  background:black;
  clip-path:polygon(0 0,100% 0,100% 55%,85% 100%,0 50%);
}
<div class="box"></div>

user_86203330
Related