title: How to create a triangular shape with curved border?
body: <p><a href="https://i.stack.imgur.com/wL63o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wL63o.png" alt="What I want"></a>
  <a href="https://i.stack.imgur.com/LCc9S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LCc9S.png" alt="What I get "></a>
  I want to do this shape using CSS not as an image can I but I get the green shape and I can't get the all background transparent !</p>
  
  <pre><code>#arrowbox:before {
      right: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(0, 128, 0, 0);
      border-right-color: #008000;
      border-width: 25px;
      margin-top: -25px;
  }
  </code></pre>