Custom scoop border style - responsive, Custom & d

问题:

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Is there any way to make custom scoop border style in CSS or jQuery?

Like the image below:

回答1:

Here's a fiddle ...http://jsfiddle.net/zjw3pg2e/5/ Does this work for you?

body {
    background: #D8D8D8;
}
.corner {
    background:white;
    height:20px;
    width:20px;    
    position:absolute;
}
#sw {
    left: -2px;
    bottom: -2px;
    border-radius: 0px 20px 0px 0px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    background:#D8D8D8;
}
#se {
    right: -2px;
    bottom: -2px;
    border-radius: 20px 0px 0px 0px;
    border-top: 2px solid white;
    border-left: 2px solid white;
    background:#D8D8D8;
}
#nw {
    left: -2px;
    top: -2px;
    border-radius: 0px 0px 20px 0px;
    border-bottom: 2px solid white;
    border-right: 2px solid white; 
    background:#D8D8D8;
}
#ne {
    right: -2px;
    top: -2px;
    border-radius: 0px 0px 0px 20px;
    border-bottom: 2px solid white; 
    border-left: 2px solid white;
    background:#D8D8D8;
}

.box {
    position:relative;
    height:200px;
    width:200px;
    border: solid 2px white;
    background:#D8D8D8;
    border-radius: 5px -5px 5px 5px;
}
.box2 {
    position:relative;
    height:160px;
    width:160px;
    overflow:hidden;
    left: 20px;
    top: 20px;
}
.box2:before{
    content:'';
    position:absolute;
    left:0;
    margin:-20px;
    height:40px;
    width:40px;
    border-radius:100%;
    background:#D8D8D8;
    box-shadow:160px 0 0 #D8D8D8,
    0 160px 0 #D8D8D8,
    160px 160px 0 #D8D8D8,
    0 0 0 500px white;   
}

HTML:

<div class="box">
    <div id="ne"  class="corner"></div> <!--ne, nw, se, sw, are the corners-->
    <div id="nw" class="corner"></div>  <!--of first object-->
    <div id="se" class="corner"></div>
    <div id="sw" class="corner"></div>
    <div class="box2"></div>  <!--box2 is the inner border object-->
</div>

Note that for the encompassing box, ne, nw, se, sw are the inverted corners.

For box2, It is rather difficult to explain what is going on. My suggestion is to play around with the colours of the box-shadow, as well as the pixel positions, to understand how the box-shadow gives the illusion of an inverted border.

Once you get the hang of it, it's really easy to change the dimensions so that it fits your liking.