JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<ul>
    <li>Item1</li>
</ul>

CSS

ul {
    list-style: none;
}
ul li {position: relative;}

li::before {
    position: absolute;
    top:-100%;
    right:0;
    content: "";
    display: inline-block;
    width: 100px;
    height: 100px;
    border-top: 3px double #000;
    transform: rotate(60deg);
}
li::after {
    position: absolute;
    top: 100%;
    right:0;
    content: "";
    display: inline-block;
    width: 100px;
    height: 100px;   
    border-bottom: 3px double #000;
    transform: rotate(-60deg);
}