Border-image gradient pattern in triangle shape
<p>I want to create an odd shaped triangle with css. My first thought was to use transparent borders with <code>transform: rotate</code> and it worked (see left triangle). Now I want to use a gradient border image pattern as background for a same triangle but I can't make it work. I tried many things like changing <code>border-width</code>, using wrappers and <code>overflow:hidden</code> among others, nothing worked. Here I post one of my tries (see right shape) as you see the pattern takes all the space, not following the triangle shape. Any ideas?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#top-left {
  position:absolute;
  left:78px;
  width: 0;
  height: 0;
  border-top: 100px solid transparent;  
  border-right: 80px solid black;
  border-bottom: 50px solid transparent;
  -webkit-transform: rotate(-20deg); 
}

#top-right {
  position:absolute;
  left:300px;
  width: 0;
  height: 0;
  border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
  border-image-width: 100px 80px 50px 0px;
  border-width: 100px 80px 50px 0px;
  border-style: solid;
  -webkit-transform: rotate(-20deg); 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
 &lt;div id="top-left"&gt;&lt;/div&gt;  
 &lt;div id="top-right"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Edit:</strong> Andrey Fedorov's answer is good, but there is a problem when the background is not a solid color, like this for example: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{  
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#wrapper {
  position: relative;
}

#top-left {
  position:absolute;
  left:0px;
 width: 0;
 height: 0;
 border-top: 100px solid #fff;  
 border-right: 80px solid transparent;
 border-bottom: 50px solid #fff;
  -webkit-transform: rotate(-20deg); 
}

#top-right {
  position:absolute;
  z-index: -10;
  left:0;
  width: 0;
  height: 0;
  border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
  border-image-width: 100px 80px 50px 0px;
  border-width: 100px 80px 50px 0px;
  border-style: solid;
  -webkit-transform: rotate(-20deg); 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
 &lt;div id="top-left"&gt;&lt;/div&gt;  
 &lt;div id="top-right"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>