How to write this isometric boundary line in css?

the background is yellow, and there is a 2px stroke in
that should be equidistant from the surrounding

.

the size of the mobile phone is different, and it has to be adaptively equidistant, so the height cannot be written down.

how do you write this?

Css
Mar.08,2022

isometric is done with border, that is, yellow thick border, background color dark red, plus an after pseudo-class, width and height are calculated by calc to calculate 100% minus 2 times the width of border and 2 times the width of 2px, and then do the horizontal and vertical center should be on the line.

Menu