My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward:
body {
background: #eac996;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background: -webkit-linear-gradient(45deg, transparent 10px, #fff 10px);
background: -moz-linear-gradient(45deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(45deg, transparent 10px, #fff 10px);
}
<div class="box"></div>
I attempted to extend the same styling to the other three corners but did not achieve the desired outcome.
body {
background: #eac996;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
}
<div class="box"></div>
To address this, it is crucial to prevent the overlap of linear gradients by positioning them strategically as shown below:
body {
background: #eac996;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position:
bottom left,
bottom right,
top right,
top left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
<div class="box"></div>
I am curious about the browser rendering rules when linear gradients overlap. Any references to specifications or further insights on this topic would be greatly appreciated.