<div></div>
div {
position: relative;
width: 200px;
height: 150px;
background: #fff;
border: 1px solid #ccc;
}
div::after {
content: '';
position: absolute;
top: 100%;
left: 20px;
width: 10px;
height: 10px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #ccc;
transform-origin: center;
transform: translateY(-50%) rotate(135deg);
background: #fff;
margin-top: 1px;
}
.circle {
border-radius: 50%;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}
div {
height: 1px;
background-image: repeating-linear-gradient(to right,
green 0, green 1em,
purple 1em, purple 2em,
tomato 2em, tomato 3em,
blue 3em, blue 4em
);
}