JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<div class="dot"></div>
<div class="dot" style="--c:gray;width:3rem;height:5px;--r:5px;"></div>
<div class="dot" style="transform:scaleY(-1);--c:green;width:150px;--r:5px;"></div>
<div class="dot" style="transform:scaleX(-1);--c:orange;height:50px;--s:15px;"></div>
<div class="dot" style="transform:scale(-1);--c:blue;width:80px;--s:5px;"></div>

CSS

.dot {
  --c:red;  /* color */
  --r:10px; /* circle size */
  --s:10px; /* space bettwen circles */
  --a:1rem; /* arrow */
  
  width:100px;
  height:100px;
  display:inline-block;
  margin:20px;
  position:relative;
  --g:radial-gradient(circle closest-side, var(--c) 85%,transparent);
  background:
    var(--g) calc(var(--s)/-2) 0/calc(var(--r) + var(--s)) var(--r) repeat-x,
    var(--g) 0 calc(var(--s)/-2)/var(--r) calc(var(--r) + var(--s)) repeat-y;
}

.dot::after {
  content:"";
  position:absolute;
  top:calc(var(--r)/2);
  left:100%;
  width:var(--a);
  height:var(--a);
  transform:translateY(-50%);
  background:var(--c);
  clip-path:polygon(0 0, 100% 50%,0 100%);
}