SOURCE

<div class="box1">11</div>
<div class="box2">
<div class="item1">11</div>
<div class="item2">11</div>
<div class="item3">11</div>
<div class="item4">11</div>
<div class="item5">11</div>
</div>

.box1{
    /* height: 400px;
    position: absolute;
    border: 1px solid;
    left: 50%; */
    /* display: flex;
    justify-content: center;
        border: 1px solid; */
    width: 0;height: 0;
    border-width: 100px;
    border-style: double;
    border-color:green transparent transparent transparent ;
    
}
.box2{
     border:1px solid green;
     width:50%;
}
.box2>div{
    border: 1px solid red;
    margin: 10px;
   
}
.item1{
    width: calc(100% - 50px);
}
.item2{
    width: calc(100% + 50px);
}
.item3{
    width: calc(100%*50px);
}
.item4{
    width: calc(100%/50px);
}
.item5{
    width: calc(100% mod 50px);
}