JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one"><span>высота и ширина по 50px</span></div>
<div class="two"><span>высота и ширина 0</span></div>
<div class="three"><span>высота и ширина 0, все границы, кроме левой прозрачные</span></div>
<div class="four"></div>
<span>псевдоэлемент перекрывающий часть левой границы</span>

CSS

.one, .two, .three, .four {
    width: 50px;
    height: 50px;
    
    margin: 20px;
    
    border: 50px solid #000;
    border-right: 50px solid #555;
    border-left: 50px solid #555;
}

.two, .three, .four {
    width: 0;
    height: 0;
}

.three, .four {    
    border-color: transparent;
    border-left-color: #555;
}

.four {
    position: relative;
}

.four:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    
    position: absolute;
    margin: -50px 0 0 -70px;
        
    border: 50px solid rgba(255,255,255,0);
    border-left: 50px solid #fff;
    
    text-indent: 150px;
}



span {
    position: absolute;
    left: 200px;
}