title: css: tab style border with background
body: <p>Tell me, can I set the background to the border formed in the following way?</p>
  
  <p><a href="https://jsfiddle.net/2Lous8vq/1/" rel="nofollow noreferrer">https://jsfiddle.net/2Lous8vq/1/</a></p>
  
  <pre><code>.object {
      position: relative;
      width: 300px;
      height: 0px;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      background: transparent;
  }
  
  .object:after {
      content: '';
      position: absolute;
      top: 2px;
      left: calc(2.45px - 50px);
      width: calc(300px - 2 * 1.4px);
      height: 0px;
      border-left: 49px solid transparent;
      border-right: 49px solid transparent;
      border-bottom: calc(100px - 2px) solid white;
      background: transparent;
  }
  
  &lt;div class="object"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It's probably worth using the custom <code>border-image</code>, but it seemed to me that this still does not have enough functionality.</p>
  
  <p>I want instead of a white color on the tab to display the image background (for example, <a href="https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg" rel="nofollow noreferrer">https://cdn.pixabay.com/photo/2016/12/02/17/39/texture-1878273__340.jpg</a>)</p>