css怎么写出这样的空心菱形

css怎么写出这样的空心菱形

---

用css实现:

<style>
    .diamond{
        display: inline-block;
        width: 14px;
        height: 14px;
  闭搭      border: 2px solid blue;
   轿差拿     transform: rotate(45deg);
    }
</style>
<div class="diamond"></div>

用svg实现:

<svg viewBox="0 0 100 100" width="20" height="20">
    <polygon points="10 50, 50 10, 90 50, 50 90" fill="none" stroke="blue" stroke-width="10" />
</svg>庆册

---

感觉你应该画两个三角形，然后拼在一起

---

css3中有图形变换，可以看一下

---