For some reason Chrome is rendering out one of my divs with a white line going straight through the middle. I provided an image below. It looks okay in Firefox hover.
HTML:
<div class="corners">
<center><h2 class="featurette-heading3">What Are BnD'z Hours Of Operation? </h2>
</center>
<ul class="">
<li>Monday-Thursday 6:00AM — 9:00PM </li>
<li>Friday 6:00AM — 10:00PM</li>
<li>Saturday 11:00AM — 10:00PM</li>
<li>Sunday 11:00AM — 8:00PM </li>
<br></div>
Here is my CSS:
.corners {
background: #cc0000; /* fallback */
background:
-moz-linear-gradient(45deg, transparent 10px, #c00 10px),
-moz-linear-gradient(135deg, transparent 10px, #c00 10px),
-moz-linear-gradient(225deg, transparent 10px, #c00 10px),
-moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #c00 10px),
-o-linear-gradient(135deg, transparent 10px, #c00 10px),
-o-linear-gradient(225deg, transparent 10px, #c00 10px),
-o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}
.corners.round {
background:#;
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
.corners, .corners.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.corners {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
First, your angles are wrong. You use 135deg where you should be using 315deg and you use 315deg where you should be using 135deg. You see a line because you have the backgrounds ending at exactly 50% and browsers are notorious for having issues along the edge of images, and it's likely a rounding difference.
Here is the corrected CSS:
.corners h2 { text-align:center;}
.corners {
background: #cc0000;
/* fallback */
background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px);
background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px);
background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px);
background: linear-gradient(45deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(315deg, transparent 10px, #c00 10px), linear-gradient(225deg, transparent 0px, transparent 10px, #c00 10px), linear-gradient(135deg, transparent 0px, transparent 10px, #c00 10px);
}
.corners, .corners.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 51% 51%;
-webkit-background-size: 51% 51%;
background-size: 51% 51%;
background-repeat: no-repeat;
}
.corners {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
Updated HTML:
<div class="corners">
<h2 class="featurette-heading3">What Are BnD'z Hours Of Operation?</h2>
<ul class="">
<li>Monday-Thursday 6:00AM — 9:00PM</li>
<li>Friday 6:00AM — 10:00PM</li>
<li>Saturday 11:00AM — 10:00PM</li>
<li>Sunday 11:00AM — 8:00PM</li>
</ul>
</div>
http://jsfiddle.net/k7UGz/9/
I've increased the background sizes so that they overlap slightly to remove issues with browsers (Chrome on Linux) not calculating out 50% precisely enough to apply full coverage.
This website leads me to believe that you should be using background-image: as opposed to background: when using radial gradients.
Related
please have a look at my exampleI have added background color, and now i want to slice some point and must be with background transparent like i added
.single_cat_list_in .meta:before {
content: "";
width: 20px;
height: 20px;
background: #ffffff !important;
position: absolute;
right: -35px;
bottom: -10px;
border-radius: 50%;
border-left: 1px solid rgba(0, 0, 0, 0.5);
}
https://prnt.sc/pi94k5
You can use multiple linear and radial gradients to create the rounded corners (taken from this article):
.item {
height: 100px;
background:
linear-gradient(45deg, transparent 10px, gold 0) top left,
linear-gradient(315deg, transparent 10px, gold 0) top right,
linear-gradient(225deg, transparent 10px, white 0) bottom right,
linear-gradient(135deg, transparent 10px, white 0) bottom left;
background-image:
radial-gradient(circle at 0 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 0, transparent 14px, white 15px),
radial-gradient(circle at 0 0, transparent 14px, white 15px);
background-size: 50% 50%;
background-repeat: no-repeat;
}
body {
background: silver;
}
<div class="item"></div>
I'm looking for a background effect like this (in pure CSS), how can I do this?
(zoomed image)
Code:
html,
body {
height:100%;
background-color:#3D3D3D;
display:flex;
}
div {
height: 100px;
width:100px;
margin:10px auto;
background-image: linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686), linear-gradient(45deg, #868686 25%, transparent 25%, transparent 75%, #868686 75%, #868686);
background-position: 0 0, 51px 51px;
background-color: #222222;
background-size: 2px 2px;
}
<div></div>
Here is pure CSS solution create 4 linear-gradients like this with repeat-x and appropriate positioning.
body {
margin: 0;
height: 100vh;
background:
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x;
}
Then repeat linear-gradient many many times. Demo:
body {
margin: 0;
height: 100vh;
background:
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 125px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 150px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 175px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 200px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 225px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 250px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 275px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 300px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 325px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 350px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 375px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 400px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 425px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 450px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 475px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 500px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 525px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 550px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 575px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 600px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 625px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 650px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 675px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 700px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 725px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 750px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 775px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 800px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 825px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 850px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 875px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 900px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 925px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 950px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 975px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1000px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1025px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1050px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1075px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1100px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1125px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1150px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1175px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1200px repeat-x,
linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1225px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1250px repeat-x,
linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1275px repeat-x,
linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1300px repeat-x;
/* and so on */
}
Of course you can use any programming language or some CSS preprocessor to generate this monster CSS properties.
But to be honest I would use SVG for this thing with 8 squares. Demo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40">
<rect x="0" y="0" width="10" height="10" fill="#868686"/>
<rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/>
<rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/>
<rect x="10" y="10" width="10" height="10" fill="#222"/>
<rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/>
<rect x="10" y="20" width="10" height="10" fill="#868686"/>
<rect x="0" y="30" width="10" height="10" fill="#222"/>
<rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/>
</svg>
Demo with SVG (works only in Chrome, you'll need to use external SVG (preferred way) or escape SVG markup):
body {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40"><rect x="0" y="0" width="10" height="10" fill="#868686"/><rect x="10" y="0" width="10" height="10" fill="#3d3d3d"/><rect x="0" y="10" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="10" width="10" height="10" fill="#222"/><rect x="0" y="20" width="10" height="10" fill="#3d3d3d"/><rect x="10" y="20" width="10" height="10" fill="#868686"/><rect x="0" y="30" width="10" height="10" fill="#222"/><rect x="10" y="30" width="10" height="10" fill="#3d3d3d"/></svg>') 0 0 / 40px 80px repeat;
}
Demo with escaped inline SVG, works everywhere, but less maintainable:
body {
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0 / 40px 80px repeat;
}
Option 1: Easier, flexible and more efficient would be using a base64 that you can easily produce with http://www.patternify.com (or something similar). A base64 will be produced that you can implement as a background-image URL with a repeat.
Option 2: CSS only solution from CSS3 Pie. Adapt your colors as needed.
body {
margin: 0;
}
div {
padding: 100vh 100vw 0 0;
background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
-webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
-webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
-moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
-moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
-moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-size: 20px 20px;
background-color: #131313;
-pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424)
0 0 / 20px #131313;
}
<div></div>
Source: http://css3pie.com/demos/gradient-patterns/
Not exactly the required background but I guess it is simple and easy to use.
div{
position: absolute;
width: 200px;
height: 200px;
background: -webkit-repeating-linear-gradient(180deg, transparent, #868686 10%, #fff 10%);
background-color: #222222;
}
div.last{
background: -webkit-repeating-linear-gradient(transparent, #868686 10%, #fff 10%);
}
<div></div>
<div class="last"></div>
I am trying to put a grid pattern behind some <divs>, like shown in the following (https://jsfiddle.net/4e5mcmk4/25/):
<div id="parent">
<div id="childA"></div>
<div id="childB">
hello
</div>
</div>
And here is the CSS:
body {
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
This is the look I am going for, but instead of applying this CSS rule to body, I want "#childA" to fill the parent (and parent to fill body), and apply the same background. More generally, I want a full-size div to appear underneath its sibling div.
However, I can't seem to get parent, childA, or childB to expand to fill the space of the div.
Any suggestions?
All you need then is to set the width and height of the parent while applying the background property
#parent{
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
width:100%;
height:100%;
position:absolute;
}
#childA{
width:100%;
height:100%;
}
I added position absolute because it has no parent with a fixed width
https://jsfiddle.net/4e5mcmk4/27/
Is this what you are going for? http://jsfiddle.net/DIRTY_SMITH/e9ypqy5t/12/
#parent{
width: 100%;
height: 100vh;
}
#childA{
width: 100%;
height: calc(100% - 20px);
background:
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(-90deg, transparent 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
linear-gradient(transparent 1px, transparent 1px), transparent;
background-size:
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px,
10px 10px;
}
#childB{width: 100%; height: 20px; background-color: lightblue;}
I want to create the same linear gradient for each border.
The border gradient with 5 colors starts from
transparent to white to black to white to transparent
That way I have transparent corners.
How can I do this for all 4 borders?
Is it possible to assign a linear-gradient to a border?
Sidenote: It should run without too much effort on IE9+ else IE10+ :P
How about using a radial gradient? Although this is just a mock up, you can see the basic effect.
.outer {
vertical-align:top;
display:inline-block;
height: 100px;
width: 100px;
position: relative;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 1%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.inner {
height: 90%;
width: 90%;
position: absolute;
left: 5%;
top: 5%;
background: white;
}
<div class="outer">
<div class="inner">
text
</div>
</div>
<div class="outer" style="height:100px; width:200px">
<div class="inner">
text
</div>
</div>
Resources
1 * gradient generator
Note
Not suitable for projects for <=IE9
You could also do this with multiple linear-gradients as backgrounds and position them as required like in the below snippet.
To change the size/width of the border, modify the 20px value in the background-size. (Note: Depending on the desired output, you may have to change the linear-gradient percentages also when you change the size. But that should be reasonably straight-forward to do.)
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
Gradients on the whole have no support in IE 9 but should work in IE 10+. Border-image on the other hand works only from IE 11 upwards.
.border-image {
height: 200px;
width: 200px;
background: -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -webkit-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), -moz-linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background: linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(90deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%), linear-gradient(0deg, transparent 10%, white 10%, black 50%, white 90%, transparent 90%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 100% 20px, 100% 20px, 20px 100%, 20px 100%;
background-position: 0px 0px, 0px 100%, 0px 0px, 100% 0px;
padding: 20px;
}
<div class="border-image">Some Test Content</div>
I have a div with a linear-gradiant as background. This gradient is created with a color parameter. But I also want to show a diagonal hatch pattern over the gradient.
"background: linear-gradient(" + color2 + "," + color + ")"
I've created the hatch pattern with another linear-gradient:
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
I'm not able to show the two linear-gradient at the same time.
The order is important. Your last background-image will be rendered first, so this one has to be the non transparent one.
And also, you need to keep all the related properties, size and origin:
.div1 {
background-image:
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(#f00000,#ffffff);
background-size: 4px 4px, 4px 4px, 100% 100%;
background-position: 0px 0px, 2px 2px, 0px 0px;
}
fiddle
you could have nested divs and then apply the styles separately:
Html
<div class="div1"><div class="div2"></div></div>
Css
.div1 {background: linear-gradient(#f00000,#ffffff)}
.div2
{
background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
Example