CSS - how to give an object with strikethrough corners a border color?
I created the following object with strikethrough borders ... http://jsfiddle.net/zjw3pg2e/
I want to use pure CSS to give the object a black border. All my attempts to do this have not yet succeeded.
HTML:
<div class="box"></div>
CSS
.box {
position:relative;
height:200px;
width:200px;
overflow:hidden;
/*border: solid 2px black;*/
}
.box:before{
content:'';
position:absolute;
/*border: solid 2px black;*/
left:0;
margin:-20px;
height:40px;
width:40px;
border-radius:100%;
background:white;
box-shadow:200px 0 0 white,
0 200px 0 white,
200px 200px 0 white,
0 0 0 500px blue;
}
I've tried setting a border for .box
and .box:before
how border: solid black 2px;
, but that doesn't do what I'm trying to achieve. I need a border to match the shape of the object perfectly.
I suspect there is a way to do this by changing the box-shadow, but I cannot figure it out. Any help is appreciated.
source to share
I did it with pure css in this example using 4 extra divs:
If you are worried about overflow you can just wrap it with an extra div.
CSS
.corner {
background:#fff;
height:20px;
width:20px;
position:absolute;
}
#sw {
left: -2px;
bottom: -2px;
border-radius: 0px 20px 0px 0px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
#se {
right: -2px;
bottom: -2px;
border-radius: 20px 0px 0px 0px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
#nw {
left: -2px;
top: -2px;
border-radius: 0px 0px 20px 0px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
#ne {
right: -2px;
top: -2px;
border-radius: 0px 0px 0px 20px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
.box {
position:relative;
height:200px;
width:200px;
border: solid 2px black;
background:blue;
border-radius: 5px -5px 5px 5px;
}
HTML:
<div class="box">
<div id="ne" class="corner"></div>
<div id="nw" class="corner"></div>
<div id="se" class="corner"></div>
<div id="sw" class="corner"></div>
</div>
source to share
So the solution I came up with ... is using 3 divs (outer box, box and inner box).
Box: before /: after and box-inner: before /: after are semicircles. on the sides that I gave a white background with a black border.
.box-wrapper{
position:relative;
height:202px;
width:202px;
overflow:hidden;
}
.box {
position: absolute;
height:200px;
width:200px;
background: blue;
border: 1px solid #000;
}
.box:before,
.box:after,
.box-inner:before,
.box-inner:after {
background: #fff;
content: ' ';
display: block;
height: 3em;
width: 3em;
border-radius: 50%;
border: solid 1px black;
position: absolute;
}
.box:before {
top: -1.5em;
left: -1.5em;
}
.box:after {
top: -1.5em;
right: -1.5em;
}
.box-inner:before {
bottom: -1.5em;
left: -1.5em;
}
.box-inner:after {
bottom: -1.5em;
right: -1.5em;
}
<div class="box-wrapper">
<div class="box">
<div class="box-inner"></div>
</div>
</div>
Usually you can apply box-shadow: 0 0 1px #000;
which allows you to give a border effect over the borders, however the circles make the relative div .box
always sit on top of it: before /: after (creating a core-shadow solution is not available).
source to share