JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="butx"><span></span></div>

<div class="butleft"><span></span></div>

<div class="butright"><span></span></div>

CSS

body {background-color:#000000;}

.butleft, .butright {display:inline-block;background-color:#000000;border-radius:500px;border:2px solid #777777;padding:10px;}

.butleft span, .butright span {display:block;background-color:#777777;width:30px;height:30px;
clip-path: polygon(45% 0, 75% 50%, 45% 100%, 30% 100%, 55% 50%, 30% 0);}

.butleft {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";position:absolute;bottom:0;left:0;}

.butright {position:absolute;bottom:0;right:0;}
    
.butx {display:inline-block;background-color:#000000;border-radius:500px;border:2px solid #777777;padding:15px;position:absolute;top:0;right:0;}

.butx span {display:block;background-color:#777777;width:20px;height:20px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}

JavaScript

function someMethodName() {



}