<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
$sh: 0 0 0 1px currentcolor;
body {
display: flex;
flex-wrap: wrap;
}
.box {
--r: 2.5em;
position: relative;
margin: 3.5em calc(1.5*var(--r)) 3.5em;
width: 20vw;
min-width: 8em; min-height: 5em;
box-shadow: $sh, inset $sh;
&:before, &:after {
position: absolute;
}
&:before {
top: calc(0% - var(--r) - .25*var(--r));
left: calc(100% - var(--a, 0)*var(--r) + var(--b, 0)*.25*var(--r));
padding: var(--r);
outline: dashed 1px #000;
border-radius: 50%;
box-shadow: 0 0 0 1px #95a;
background:
radial-gradient(#b53 2px, transparent 3px),
repeating-linear-gradient(45deg, #f90, #f90 2px, transparent 0, transparent .5em);
content: ''
}
&:after {
left: calc(-.75*var(--r));
top: calc(100% + .5*var(--r));
padding: .5em;
border-radius: .5em;
background: #333;
color: #ddd;
font: 1em consolas, monaco, monospace;
white-space: nowrap;
content: 'left: 100%'
}
&:nth-child(n + 2) {
--a: 1;
&:after {
content: 'left: calc(100% - var(--r))'
}
}
&:nth-child(3) {
--b: 1;
&:after {
content: 'left: calc(100% - var(--r) + \#{$m})'
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.