title: CSS - Oblique border without filling
body: <p>I've a div and I need a border with the left side oblique, but I'm finding only solutions that have the element filled with color.
  I need only the border, like this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/e3owg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e3owg.png" alt="enter image description here"></a></p>
  
  <p>How can I do this?</p>
  
  <p>My actual code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="arrow"&gt;
      &lt;span id="time"&gt;30 mins&lt;/span&gt;
      &lt;img src="assets/up_arrow.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.arrow {
      display: inline-block;
      text-align: right;
      text-decoration: none;
      margin-left: 35%;
      padding: 5px 0 5px 0;
      border-style: solid;
      border-width: 1px 0 1px 0;
      border-color: #929A9D transparent #929A9D transparent;
   }
  
   .arrow &gt; img {
       vertical-align: middle;
       width: 12px;
       height: 12px;
   }
  </code></pre>