How do I draw a polygon border? in css

Dear developer i want make like this

this is before

i want after like this

Lable is li tag like

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>           
</ul>

The box below is the div tag

like this

<div class="main-container">

</div>

I tired like this

li{
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
}

div{
border: 1px solid red;
}

However, the two borders overlap and are disgusting.

**

I would like to avoid the table-cell method. Because it was impossible to design a reactive type by wrongly calculating the area.

**