How to round corners when using CSS clipping path
P粉921130067
2023-08-24 15:40:15
<p>I would like to be able to round the 3 leftmost corners of the shape I created, any idea how to do this? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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%);
}</pre>
<pre class="brush:html;toolbar:false;"><div></div></pre>
<p><br /></p>
Use illustrations with circle properties: