<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: .5em calc(1.5*var(--r)) 7em;
	width: 20vw;
	min-width: 8em; min-height: 5em;
	box-shadow: $sh, inset $sh;
	
	&:before, &:after {
		position: absolute;
	}
	
	&:before {
		left: calc(100% - var(--r) + .25*var(--r));
		top: 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% + 1.5*var(--r));
		padding: .5em;
		border-radius: .5em;
		background: #333;
		color: #ddd;
		font: 1em consolas, monaco, monospace;
		white-space: nowrap;
		content: 'top: 100%'
	}
	
	&:nth-child(n + 2) {
		--a: 1;
		
		&:after {
			content: 'top: calc(100% - var(--r))'
		}
	}
	
	&:nth-child(3) {
		--b: 1;
		
		&:after {
			content: 'top: calc(100% - var(--r) + \#{$m})'
		}
	}
}