Geek asks and answers

CSS - double / offset border with dashed outer border

I would like to create a circle with an external dotted border offset from the main circle. I have attached a link for reference.

I tried to use the shadow for the shadows to achieve this, but so far no luck. Is there any way to do this?

enter image description here

+3
source share
3 answers

I managed to get this effect using the pseudo-element selector ::before. ( ::afterwill work just as well)

Here is the demo

Given an element:

<div class="circle"></div>

Apply the following CSS rule:

.circle {
    position: relative;
    float: left;
    border: 2px dotted black; /* This is the outer border (dotted) */
    background-color: white; /* This is the color of the inner border */
    padding: 10px; /* This is the size of the inner border */
    border-radius: 50%;
}

.circle::before {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #6abde7; /* This is the color of the inner circle */
    width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
    height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
    border-radius: 50%;
}

You can configure a few rules above. They are mainly just to shape the circle for demonstration. I commented on those that control circle styles.

Explanation

CSS. , . (, <input>)

+9

DEMO

.circle {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:#cef;
    border:3px dotted #000;
    box-shadow:inset 0 0 0 10px #fff;
}

UPDATE

:after

DEMO

.circle {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:#fff;
    border:3px dotted #000;
}

.circle:after {
    content:' ';
    display:block;
    height:180px;
    width:180px;
    border-radius:50%;
    background-color:#cef;
    position:relative;
    top:10px;
    left:10px;
}
0

Is there a reason you cannot have a second div? http://jsfiddle.net/gUYFF/1/

.outline {
float:left;
border: dotted 2px black;
width: 220px;
height: 220px;
border-radius: 110px;
box-shadow: 0 0 0 10px white inset;
}
.circle {
    background-color: #6abde7;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin:10px;
}
<div class="outline"><div class="circle"></div></div>
0
source

More articles:


All Articles