CSS doesn't work in Chrome but works in Firefox - html

I have piece of CSS code which works fine in Firefox but not in Chrome.
I guess made a mistake when using -webkit-linear-gradient which shows invalid value in chrome
HTML code:
<div class="laptop">
<div class="glare-xl"></div>
<div class="screen-xl">
<img src="http://www.psdgraphics.com/file/silver-laptop-icon.jpg" alt="laptop" />
</div>
<div class="base-xl"></div>
<div class="addons-xl "></div>
<div class="button-xl"></div>
</div>
CSS code:
.laptop:before {
background: none repeat scroll 0 0 padding-box #d3d4d6;
border-color: #cecece #b7b7b9 #5e5d62;
border-radius: 12px 12px 0 0;
border-style: solid;
border-width: 1px;
bottom: 0;
content: "";
height: 317px;
left: 0;
margin-bottom: -1px;
margin-left: -6px;
margin-top: -6px;
position: absolute;
top: 0;
width: 536px;
z-index: -3;
}
.laptop:after {
background: none repeat scroll 0 0 padding-box #000000;
border: 1px solid #bdbec0;
border-radius: 10px 10px 0 0;
bottom: 0;
content: "";
height: 311px;
left: 1px;
margin-bottom: -1px;
margin-left: -5px;
margin-top: -6px;
position: absolute;
top: 2px;
width: 532px;
z-index: -2;
}
.laptop {
background: none repeat scroll 0 0 padding-box #010101;
border: 1px solid #101113;
border-radius: 8px 8px 0 0;
display: inline-block;
height: 230px;
margin-bottom: 40px;
margin-left: 60px;
position: relative;
width: 528px;
}
.glare-xl {
background-clip: padding-box;
background-image: -moz-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -webkit-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -ms-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: -o-linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
background-image: linear-gradient(-27% bottom , rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.25) 55.05%);
border-radius: 7px 7px 0 0;
height: 308px;
position: absolute;
top: -1px;
width: 610px;
z-index: 100;
}
.screen-xl:before {
background: -moz-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(center top , #303235 0%, #0a0a0a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border-color: #000000;
border-radius: 7px 7px 0 0;
border-style: solid;
border-width: 9px 7px;
content: "";
height: 272px;
left: -6px;
position: absolute;
top: -5px;
width: 500px;
z-index: 3;
}
.screen-xl:after {
background: -moz-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(center top , #5c5c5c 0%, #656565 8%, #4f4f4f 42%, #727272 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border: 1px solid #404040;
border-radius: 25px;
box-shadow: 0 0 2px #ffffff;
content: "";
height: 3px;
left: 49%;
position: absolute;
top: -8px;
width: 3px;
z-index: 130;
}
.screen-xl {
border: 1px solid #141414;
border-radius: 2px 2px 0 0;
height: 276px;
left: 10px;
position: absolute;
top: 12px;
width: 502px;
}
.screen-xl img {
border-radius: 2px;
height: 272px;
left: 0;
margin-left: 1px;
margin-top: 4px;
position: absolute;
width: 500px;
z-index: 100;
}
.base-xl:before {
background: -moz-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(center top , #c5c4c6 0%, #aeadb1 6%, #99989d 25%, #98979d 31%, #918f96 38%, #686a6d 63%, #4c5254 75%, #43484a 81%, #2c2f30 94%, #16191a 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border-radius: 0 0 400px 400px / 0 0 100px 100px;
bottom: -15px;
box-shadow: 7px 0 3px #6a6d71 inset, -7px 0 3px #6a6d71 inset;
content: "";
height: 15px;
left: -1px;
position: absolute;
width: 655px;
z-index: 130;
}
.base-xl {
background: -moz-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #e3e3e5 14%, #e3e3e5 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border-color: #6b6e72;
border-radius: 3px 3px 0 0;
border-style: solid;
border-width: 1px 1px 0;
bottom: -101px;
box-shadow: 0 1px 2px #ffffff inset;
float: left;
height: 22px;
left: -125px;
margin-left: 60px;
position: absolute;
width: 654px;
z-index: 4;
}
.addons-xl:before {
background-color: #000000;
border-radius: 55px 55px 5px 5px;
bottom: -115px;
content: "";
height: 5px;
left: 4%;
position: absolute;
width: 5px;
z-index: 1000;
}
.addons-xl:after {
background-color: #000000;
border-radius: 55px 55px 5px 5px;
bottom: -115px;
content: "";
height: 5px;
position: absolute;
right: 4%;
width: 5px;
z-index: 1000;
}
.addons-xl {
background-color: rgba(0, 0, 0, 0);
border-radius: 10px;
height: 3px;
margin-left: 53%;
margin-top: 5px;
width: 3px;
z-index: 1000;
}
.button-xl:after {
background: -moz-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(center top , #1a2226 0%, #535a61 64%, #68778c 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border-radius: 10px;
bottom: -6px;
box-shadow: 0 0 1px #ffffff;
content: "";
height: 3px;
left: 274px;
position: absolute;
width: 20px;
z-index: 4;
}
.button-xl {
background: -moz-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -ms-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: -o-linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
background: linear-gradient(left center , #979ba0 1%, #dfdfdf 4%, #f2f2f2 6%, #b1b3b6 14%, #b1b3b6 86%, #f2f2f2 94%, #dfdfdf 96%, #6a6d71 100%) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0);
border-color: #5c6064;
border-radius: 0 0 50px 50px;
border-style: solid;
border-width: 0 1px 1px;
bottom: -87px;
box-shadow: 0 1px 5px #ffffff, 0 1px 1px #ffffff inset;
content: "";
height: 6px;
left: 44%;
position: absolute;
width: 60px;
z-index: 4;
}
Questions:
1)Why CSS doesn't work in Chrome
2)How I can make this all structure i.e laptop as responsive as I tried max-width at all places but it doesn't work?
JS FIDDLE


You need to remove/replace the center keyword in the linear-gradient() function. According to CSS3 specs there is no such thing.

Related

Cant display the background image mixed with pseudo class

İ am trying to achieve a spesific look but i cant have it. İ cant see the stylistic element unless i lower the opacity of the background color that i apply with pseudo classes. I actually achieved what i needed to do by applying two backgrounds. But i was so hopeless when i had the problem and it really got me angry not having the result so i am asking why cant i see the background image of the class of main2
HTML
<section class="main2">
<div class="main2_image">
<img src="images/illustration-phones.svg" alt="" class="main2_img">
</div>
<div class="main2_textbox">
<div class="box">
<h2>State of the art Infrastructure</h2>
<p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast
connectivity. This ensures your site will load instantly, no matter where your readers are,
keeping your site competitive.</p>
</div>
</div>
</section>
CSS
.main2{
margin-top: 20rem;
position: relative;
z-index: 1;
background-image: url(images/bg-pattern-circles.svg);
border-top-right-radius: 10rem;
border-bottom-left-radius: 10rem;
}
.main2::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -3m;
background-image:
linear-gradient(to right,
hsl(237, 17%, 21%),
hsl(237, 23%, 32%));
}
İ can only display it when i get lower the opacity of main2 pseudo class. Thanks in advance!
The end result should look like this. The after pseudo element is the circular shape that should be on top of the background image of the main2 element

you can do it by css like this
live demo
.bg-gold {
background: -webkit-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -o-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -moz-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
.bg-news {
background: -webkit-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -o-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -moz-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-aurora {
color: #fff;
background: -webkit-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -o-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -moz-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background-size: cover;
background-position: 50% 21%;
text-align: right;
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-purple {
color: #fff;
background: -webkit-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -o-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -moz-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
}
.bg-spring {
background: -webkit-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -o-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -moz-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
}

Box with clipped corners

I need a box with all clipped corners. Here's what I have so far:
body {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
#block {
width: 330px;
height: 200px;
margin-left: 20%;
background-color: #222;
-webkit-clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%)
}
<div id="block"></div>
Unfortunately there is no Edge support and I can't use box-shadow. Is there another way to accomplish this?

Could we do something using overflow hidden and a rotated pseudo element?
.box{
width:100px;
height:100px;
position:relative;
overflow:hidden;
}
.box:after{
content: '';
width:120px;
height:120px;
position:absolute;
background:#465;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%) rotateZ(45deg);
}
<div class="box"></div>

Align text to bottom in a button and in front of background

How can I align the text in the button to the bottom?
I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.
UPDATE:
Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.
Code:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>
For some reason bootstrap is not working in the code snippet

You can create a child element in your button (here a span) that you position to the bottom of the button.
Because the button is position: relative, the span with position: absolute will be position according to the button.
We also create a child element to display the background, via the ::before pseudo-element selector.
To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top.
You also can force the stacking order with the z-index property.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
}
.img-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}
.img-panel > span {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span>Hello</span>
</button>

You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.
Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

Try adding this:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
And in html markup add:
<span>Hello</span>

Try this
.img-panel {
display: flex;
flex-direction: column-reverse;
align-items: center;
}

If your button's height is 300px, you can try with a padding-top property :
CSS:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
padding-top:250px;
}
Bootply : http://www.bootply.com/AHSl2MVDIy

Place your button text in a span, give it absolute positioning and set bottom to 0:
See the .img-panel span.button-title rule.
Update:
To place the text above the background, just add a higher z-index for the button text. A low number will do it.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
.img-panel span.button-title {
position: absolute;
bottom: 0;
z-index: 10;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span class="button-title">Hello</span>
</button>
</div>
</div>

Create linear gradient border for top and bottom edges only?

With the code below, I can only generate a linear-gradient border-image for the element's bottom edge. How can I modify the code to make one for its top as well?
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
-webkit-border-image: -webkit-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-moz-border-image: -moz-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-o-border-image: -o-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
border-image: linear-gradient(
to left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
}
Current Output:

You are using the shorthand border-image property for setting the size of the gradient and according to the values provided, the top, left and right borders are nullified.
Setting 100% as width of the border gradient on top and 3px as its height would result in the gradient getting applied only on top and bottom.
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
In the above lines of code, the 100% 0 100% 0/3px 0 3px 0 represents the size of the gradient border on each side (read as [top] [right] [bottom] [left]). Originally it was 0 0 100% 0/0 0 3px 0.
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>
Note that border-image property still has pretty low browser support and would not work if you need to support IE10 and lower. Instead of it, you could use background-image like in the below snippet to produce a similar effect though. This works in IE10 also (but still wouldn't work in IE9- because they do not support gradients at all).
div {
/* gradient shining border */
background-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
background-size: 100% 3px;
background-position: 0% 0%, 0% 100%;
background-repeat: no-repeat;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>

This should work:
...
border-style: solid;
border-width: 3px;
border-image: linear-gradient(90deg,
rgba(0, 0, 0, 0),
rgba(0, 255, 255, 1),
rgba(0, 0, 0, 0))
1 0;
The border-image is shorthand for:
border-image-source: #;
border-image-slice: #;
border-image-width: #;
border-image-outset: #;
border-image-repeat: #;
More about this you can find in border-image MDN.

Shape with striped background and a triangular cut on top

Hello I need to make shape in CSS/HTML5. I pasted it as an image but now I need to make shape like this.
Is there any way to do it? I made something with triangles but it doesn't even look close to this.
SHAPE:
Here is my CSS.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float:left;
}
#flag:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
HTML:
<div id="flag"></div><span>SOME TEXT HERE</span>
JS FIDDLE

You can achieve this using either of the following 2 options.
Option 1: Using box-shadow and an extra pseudo-element.
In this option an extra pseudo-element of size 20px is added (white/grey color) and using appropriately positioned box-shadows, the striped pattern is achieved. This method can be useful if the dimensions of your flag element is fixed.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float: left;
overflow: hidden;
}
#flag:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
#flag:after {
content: "";
position: absolute;
top: 0px;
left: -30px;
height: 10px;
width: 150px;
background: #eee;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;
}
<div id="flag"></div><span>SOME TEXT HERE</span>
Option 2: Using Linear Gradients
In this method the stripes are obtained using linear-gradients as a background on a pseudo-element which is rotated by 45 degrees to achieve the diagonal stripes effect. This option can be used even if the dimensions are not fixed because of usage of percentage for linear-gradients.
div{
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
div:before{
content: '';
position: absolute;
background: -webkit-linear-gradient(90deg, red 50%, #eee 50%);
background: -moz-linear-gradient(0deg, red 50%, #eee 50%);
background: linear-gradient(0deg, red 50%, #eee 50%);
background-size: 100% 20px;
top: 0px;
left: 0px;
height: 150%;
width: 150%;
-webkit-transform-origin: 15% 60%;
-moz-transform-origin: 15% 60%;
transform-origin: 15% 60%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div:after{
content: '';
position: absolute;
background: #eee;
top: -25%;
left: 25%;
height: 50%;
width: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div></div>
Note: In the second sample, I had positioned the top triangle such that it still leaves some space on either sides just for an example. This fiddle has a top triangle that covers the full width of the flag.

You could use css gradients for this, as well as a single pseudo element:
div{
position:relative;
height:300px;
width:300px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 15%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,1) 95%, rgba(0,0,0,1) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(35%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,1)), color-stop(55%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(76%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(96%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div:before{
content:"";
position:absolute;
border-top:150px solid white;
border-left:150px solid transparent;
border-right:150px solid transparent;
top:0;
<div></div>
A slightly different approach to create the upper section would also be ok (i guess):
div {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(0, 0, 0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(76%, rgba(0, 0, 0, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(255, 255, 255, 1)), color-stop(96%, rgba(0, 0, 0, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
div:before {
content: "";
position: absolute;
height: 70%;
width: 70%;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
background: white;
top: 0;
<div></div>
Useful resource: Gradient editor