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画出来