<body>
<div class="c1">
</div>
<div class="c2">
</div>
</body>
body{
background:yellow;
}
.c1{
height:90px;
background:rgba(255,0,0, .3);
/* background:url(./test.png); */
}
.c2{
height:90px;
/* background: -webkit-linear-gradient(left, red, green); */
/* background: linear-gradient(to right, red, green); */
/* background: linear-gradient(180deg, red, green); */
/* background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%); */
background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),
linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.