JSFiddle - React, Tailwind, and code Playground

by lokeshjain2008

HTML

<div class="arrow_div">
 Tooltip-arrow.<br/>
Cool....

CSS

.arrow_div{
        display:inline-block;
        margin-top:30px;
        padding:20px;
        border:3px solid  black;
        position:relative;   /* This important to give position relative as we will be position arrow relative to this */
}
.arrow_div:after{
        content:"" left,right;
        border:10px solid transparent; /* this  will have no effect */
        position:absolute;
        border-left:10px solid white; /* important give colors here. this will  give the effect :NOTE 1 */
      left:100%;
      top:10px;
}
.arrow_div:before{
    content:"" left,right;
     border:13px solid transparent;
     position:absolute;
     border-left:13px solid black; /* color of the main div and +width of main div's border */

     left:100%;
     top:7px;
}