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

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

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

空心菱形思路：

1、两个三角形拼接；

<div class="a"></div>

<div class="b"></div>

.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°

<div class="c"></div>

.c{
  display: inline-block;
  width: 1rem;
  height:1rem;
  border: 0.5rem blue solid;
  transform: rotate(45deg) ;

}

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

<div class="d"></div>

.d{
  display: inline-block;
  width: 1rem;
  height:1rem;
  border: 0.5rem #0ea0d3 solid;

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

}

4、svg画出来

<svg width="100%" height="100%" version="1.1"  xmlns="http://www.w3.org/2000/svg">  
<polygon points="0,30 20,0 40,30 20,60"  style="fill:none;  stroke:blue;stroke-width:1"/>  

</svg>