空心正方形html,html +css 制作空心菱形的几种办法

写出这么简单的东西 求别喷。原本菱形完全可以用图片代替，如果用css还没做过，于是自己把能想到的写下来

如果哪儿有不对的，请各位指点迷津。

空心菱形思路：

1、两个三角形拼接；

.a{

float: left;

position: relative;

height: 0px;

width: 0px;

border-top: 10px solid transparent;

border-right: 11px solid black;

border-bottom: 11px solid transparent;

}

.a:after{

content: '';

position: absolute;

top: -8px;

left: 2px;

border-top: 8px solid transparent;

border-right: 9px solid #FFFFFF;

border-bottom: 9px solid transparent;

}

.b{

float: left;

position: relative;

height: 0px;

width: 0px;

border-top: 10px solid transparent;

border-left: 11px solid black;

border-bottom: 11px solid transparent;

}

.b:after{

content: '';

position: absolute;

top: -8px;

left:-11px;

border-top: 8px solid transparent;

border-left: 9px solid #FFFFFF;

border-bottom: 9px solid transparent;

}

2、正方形旋转45°

.c{

display: inline-block;

width: 1rem;

height:1rem;

border: 0.5rem blue solid;

transform: rotate(45deg) ;

}

3、旋转正方形   稍微变形后菱形

.d{

display: inline-block;

width: 1rem;

height:1rem;

border: 0.5rem #0ea0d3 solid;

transform: rotate(45deg) skew(22deg,22deg);  //旋转   变形  数值可以改

}

4、svg画出来