JSFiddle - React, Tailwind, and code Playground

by Debloper

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Repeating Leanear Gradient - Crossbrowser Testcase</title>
</head>

<body>
    <header>
        Catchy tagline here...
    </header>
    <nav></nav>
</body>

</html>

CSS

html, body { margin: 0; width: 100%; height: 100%; }
header {
    padding: 2em 0;
    text-align: center;
    background: #bada55;
    background-image: -webkit-linear-gradient(top, #bada55, #ac3);
    background-image: -moz-linear-gradient(top, #bada55, #ac3);
    background-image: -ms-linear-gradient(top, #bada55, #ac3);
    background-image: -o-linear-gradient(top, #bada55, #ac3);
    background-image: linear-gradient(top, #bada55, #ac3);
}
nav {
    height: 10px;
    background-color: transparent;
    background-image: -webkit-repeating-linear-gradient(135deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px),
            -webkit-repeating-linear-gradient(45deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px);
    background-image: -moz-repeating-linear-gradient(135deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px),
            -moz-repeating-linear-gradient(45deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px);
    background-image: -ms-repeating-linear-gradient(135deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px),
            -ms-repeating-linear-gradient(45deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px);
    background-image: -o-repeating-linear-gradient(135deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px),
            -o-repeating-linear-gradient(45deg, transparent -2px, transparent 12px, #ac3 12px, #ac3 18px);
    background-size: 16px;
}

JavaScript

// Repeating Gradient: Works fine on Firefox, but not on Chrome
// The same thing seem to work pretty fine on some other place.

// Say at http://lea.verou.me/css3-gradients/#slide14
// use the following:

//background-image: repeating-linear-gradient(135deg,
//            transparent -2px, transparent 12px,
//            #ac3 12px, #ac3 18px),
//        repeating-linear-gradient(45deg,
//            transparent -2px, transparent 12px,
//            #ac3 12px, #ac3 18px);
//background-size: 16px;

// Wonder what's screwing it here though
// Tried varying the values, didn't work out
// and funny, the inspector says, it IS in effect.