Revisions to How to round out corners when using CSS clip-path

edited tags

Link

edited Jan 10, 2023 at 15:32

Temani Afif

280k
30
378
503

edited tags

Link

edited Dec 30, 2020 at 8:46

Temani Afif

280k
30
378
503

css path clip clip-path

Added spaces

Source Link

edited Mar 4, 2019 at 0:47

Shikkediel

5.2k
16
50
80

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

div {
    position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

div{
    position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

<div></div>

I want to be able to round out the 3 leftmost corners on this shape that I have created, any idea how that can be done?

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}