JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>

<p>&nbsp;</p>

<div style="width:120px;margin:50px auto;">
<div style="border-top: 10px dashed blue;margin-top:14px;width:90px;height:10px;float:left;"></div>
<div style=" width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:30px solid blue;float:right;"></div>
</div>

<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:rotate(90deg);--c:blue;width:80px;--s:5px;"></div>

CSS

.arrow {
    width:10rem;
    margin:50px auto;
}

.line {
    border-top: 10px dashed blue;
    margin-top:14px;
    width:calc(10rem - 30px);
    height:10px;
    float:left;
}
.point {
    width: 0; 
	height: 0; 
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid blue;
    float:right;
}

.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%);
}