JSFiddle - React, Tailwind, and code Playground

by drublic

HTML

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

CSS

.arrow {
  position: relative;
}
.arrow:before,
.arrow:after {
    content: "";
    position absolute;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid red;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
}
.arrow:after {
  border-top: 3px solid red;
  border-right: 0;
  border-radius: 20px 0 0 0;
  top: -13px;
  left: -10px;
  width: 12px;
  height: 12px;
    background: #ddd;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}



body { padding: 50px; }