面试常问的 border实现三角形&使一个矩形水平垂直居中并设定宽高比

实现一个矩形，居中，宽高2：1

复习position：

• static：默认的布局；即元素在正常文档流的位置。
• relative：相对定位；不脱离文档流，移动参照点是定位前的位置。
• absolute：绝对定位；脱离文档流，参照点是最近的非static的祖先元素。
• fixed：绝对定位；脱离文档流，参照点是屏幕视口。
• sticky：粘性定位；不脱离文档流，参照点是最近的滚动父元素。

具体效果请查看MDN

.box{
   
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;<