title: SCSS arrow with round corners
body: <p>I am trying to make out of these arrows, rounded corner arrows.</p>
  <p>Here is the sample code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;span class=&quot;calendar-arrow calendar-arrow-left&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;calendar-arrow calendar-arrow-right&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the scss is:</p>
  <pre><code>@mixin arrow($direction) {
    width: 0;
    height: 0;
    border-style: solid !important;
    border-style: inset;
    -webkit-transform: rotate(360deg);
    border-radius: 3px; /* this does not work well */
    @if $direction == left {
      border-width: 6px 8px 6px 0;
      border-color: transparent #8f9cbc transparent transparent;
    }
    @if $direction == right {
      border-width: 6px 0 6px 8px;
      border-color: transparent transparent transparent #8f9cbc;
    }
  }
  
  
  .container {
    display: flex;
    width: 400px;
    height: 200px;
    background: yellow;
      .calendar-arrow-left {
      @include arrow(left);
      position: absolute;
      top: 28px;
      left: 20px;
    }
    .calendar-arrow-right { 
      @include arrow(right);
      position: absolute;
      top: 28px;
      left: 40px;
    }
  
  }
  </code></pre>
  <p>I have searched other solutions, but they seem to have the <code>content:''</code> property.
  I am wondering if it is possible to fix the above code, without the need to use <code>content</code>.</p>
  <p>I would appreciate your help.</p>
  <p>Here is a <a href="https://codepen.io/seekman/pen/oNqvQRb" rel="nofollow noreferrer">codepen</a>.</p>
  <p>Edit: these are the sizes of the arrow I need to create:</p>
  <p><a href="https://i.stack.imgur.com/7PxJa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7PxJa.png" alt="arrow" /></a></p>