html长方形代码_html – 带有倒置矩形角的边框

示例1：具有非实心页面背景的形状的透明背景

这是一种支持页面非渐变背景(渐变或图像),形状透明背景以及可缩放的方法.缺点可能是它需要不止一个元素.

.shape {

position: relative;

height: 200px;

width: 500px;

}

.shape-inner {

position: absolute;

top: 2px;

left: 2px;

height: 100%;

width: 100%;

border: 2px solid white;

}

.shape:after,.shape:before {

position: absolute;

content: '';

height: 100%;

width: 100%;

border: 2px solid white;

}

.shape:after {

top: -4px;

left: 10px;

border-width: 2px 2px 0px 0px;

}

.shape:before {

top: 10px;

left: -4px;

border-width: 0px 0px 2px 2px;

}

.shape-inner:before,.shape-inner:after {

position: absolute;

content: '';

he