Css ben cutters

by ben74

HTML

css height equals width
<flex class='nm h2'><ib class='TriTipBotLeft w2'></ib><ib class='bbg1'>Expected result</ib><ib class='TriTipTopRight w2'></ib></flex> - 

<flex class='nm f2'><ib class='TriTipBotLeft swh2'><img src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;"/></ib><ib class='bbg1'>Same Width than Height which is dynamic</ib><ib class='TriTipTopRight swh2'><img src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;"/></ib></flex> -

<flex class='nm h2'><i class='TriTipBotLeft shw'></i><i class='bbg1'>Same Height than width</i><i class='TriTipTopRight shw'></i></flex> <hr>
<div class="box upc"><div class="t">SimpleBox</div></div>

<div class="sameHeightThanLarge upc"><div class="t">Same height than width</div></div>
<div class="sameWidthThanHeight upc"><div class="t">swh</div></div>
<div class="sameWidthThanHeight upc"><div class="t2">swh2</div></div>

<div class="shw2" style="width:120px;border:1px dashed #F00">
  <img src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;"/>
  <div class="t">H2W</div>
</div>

<div class="swh2" style="border:1px dashed #F00;height: 120px;">
  <img src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
  <div class="t">W2H</div>
</div>

CSS

/*width => https://codepen.io/forceuser/pen/MMWBBx*/
flex{display:inline-flex} .h2,.h2 *{height:2rem;}
.f2{display:table;}
.f2 ib{display:table-cell;vertical-align:middle;}

.shw2,.swh2{display:inline-block;position:relative;}
.shw2 img{width:100%;height:auto;} .swh2 img{height:100%;width:auto;}/*Fake Img*/
.swh2 .t,.shw2 .t{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;}


.box{position:relative;}
.box:before{content:"";float:left;padding-top:100%;}
.ratio2_1:before{padding-top:50%;}
.box .t{float:left}

.sameWidthThanHeight{position:relative;height:100px;}
.sameWidthThanHeight:before{content:"";float:left;padding-left:100%;}
.sameWidthThanHeight .t{float:left;}
.sameWidthThanHeight .t2{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;}

.shw{position:relative;} .shw:before{content:"";float:left;padding-top:100%;}

.swh{position:relative;} 
.swh:before{content:"";float:left;padding-top:100%;}

.w2{width:2rem}


.bbg1{background:rgba(0,0,0,0.5);}

.TriTipBotRight{background: linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);}
.TriTipBotLeft{background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);}

.TriTipTopRight{background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);}
.TriTipTopLeft{background: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);}

.nm{margin:0 auto}


i{display:inline;font-style:normal;border:1px dashed #00A;padding:2px;}
ib{display:inline-block;border:1px dashed #080;padding:2px;vertical-align:top}
b{display:block;font-weight:400;border:1px dashed...