JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="d1"></div>
<div class="d2"></div>

CSS

div {
width: 100px;
height: 100px;
margin: 30px auto;
background: linear-gradient(left, #1aacfd 50%, #1a89e5 50%);
background-size: 10px 10px;
}

.d2 {
  transform: rotate(45deg);
    
  background-color: #1aacfd;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #1a89e5 1px, #1a89e5 2px);   
  background-size: 300px 300px;
}

JavaScript

/* 

How to make a vertically stripped background on a rotated element ?

Emad Elsaid (@blaz_boy on Twitter) managed to do it with a pseudo-element : http://jsfiddle.net/YQp75/20/.

Mads Cordes (@mobilpadde on Twitter) managed to do it with a -webkit-mask : http://jsfiddle.net/Mobilpadde/D7dEf/3/.

Sandy Jackiewicz (@SandyEJack on Twitter) tried with an image encoded base64, via Patternify. I dug into it and the best I could do is : http://jsfiddle.net/ZumRs/.

Tim Pietrusky (@TimPietrusky on Twitter) used 'repeating-linear-gradient'
http://jsfiddle.net/TimPietrusky/rhP5A/

Any other solution ? 

*/