search

Home  >  Q&A  >  body text

How to round corners when using CSS clipping path

<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>
P粉921130067P粉921130067465 days ago555

reply all(1)I'll reply

  • P粉959676410

    P粉9596764102023-08-25 14:08:37

    Use illustrations with circle properties:

    inset(0% 45% 0% 45% round 10px)

    reply
    0
  • Cancelreply