title: how to set part of circle as background in css
body: <p>I am trying to get part of circle as back ground </p>
  
  <p>What I want :</p>
  
  <p><a href="https://i.stack.imgur.com/RMBz8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RMBz8.png" alt="enter image description here"></a></p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/jmbYQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jmbYQ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/tModW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tModW.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/rq4nw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rq4nw.png" alt="enter image description here"></a></p>
  
  <p>I tried to get this by <code>border-radius</code> but it doesn't work always.</p>
  
  <p>Here is what I tried:</p>
  
  <pre><code>a{
    min-width: 80px;
    height: 60px;
    padding: 20px 15px !important;
  
    // active/current navigation link
    &amp;.active, &amp;:hover{
       background-color: #e15669;
      &amp;:before{
        position: absolute;
        content: '';
        display: block;
        height: 60px;
        width: 30px;
        border-radius: 90px 0 0 90px;
        -moz-border-radius: 90px 0 0 90px;
        -webkit-border-radius: 90px 0 0 90px;
        background: #e15669;
        top: 0;
        left: -30px;
        z-index: -1;
      }
      &amp;:after {
        position: absolute;
        content: '';
        display: block;
        height: 60px;
        width: 30px;
        border-radius: 0 90px 90px 0;
        -moz-border-radius: 0 90px 90px 0;
        -webkit-border-radius: 0 90px 90px 0;
        background: #e15669;
        top: 0;
        right: -30px;
        z-index: -1;
      }
    }
  }
  </code></pre>