JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<span class="puzzle-piece">5</span>
<span class="puzzle-piece">*</span>
<span class="puzzle-piece">0.5283</span>

CSS

.puzzle-piece:first{
    margin-left: 0;
}
.puzzle-piece {
    min-width: 75px;
    min-height: 75px;
    position: relative;
    display: inline-block;
    border: 1px solid #000;
    text-align: center;
    padding: 0 10px;
    margin-left: -6px;
}
.puzzle-piece:before, .puzzle-piece:after {
    content:' ';
    width: 15px;
    height: 25px;
    position: absolute;
    display: inline-block;
    top: 50%;
    margin-top: -12.5px;
    border: 1px solid #000;
    border-left-color: #fff;
}
.puzzle-piece:before {
    /* I hate you borders */
    left: -1px;
}
.puzzle-piece:after {
    left: 100%;
}