JSFiddle - React, Tailwind, and code Playground

HTML

<div class="crossed">
        <div style="text-align:center;">A</div>
        <div style="float:left;margin-top:1em;">B</div>
        <div style="float:right;margin-top:1em;">C</div>
        <div style="text-align:center;margin-top:4em;">D</div>
</div>

CSS

.crossed 
{
    width: 100px;
    height: 100px;
    background:linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}