Html 如何使用CSS创建嵌套菱形形状？

我会做钻石，但我不知道怎么做。我想有一个网站，使用CSS钻石，我附加了一个图像，让我在做什么看更好的想法

以下是我迄今为止的HTML：

HTML:

<div class="col-feature">
  <div class="feature-icon">
    <div class="icon">
      <i class="fa fa-tasks"></i>
    </div>
  </div>
</div>

.col-feature{
.feature-icon{
    width: 100px;
    height: 100px;
    position: relative;
    margin-top: 25px;
    display: inline-block;

    &:before{
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #444444;
        .rotate(45);
        .transition(border-color 0.3s);
    }

    &:before{
        left:5px;
        top:0;
        right:-5px;
        bottom:0;       
    }
}
}

---

同时使用

：before

和

：after

伪元素

样本：

---

旋转不起作用吗

-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg); /* opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/

将多个

作为菱形类，从顶部循环，在它们之间垂直添加一些像素填充，然后在每个div中构建菱形？（可能是也可能不是，只是一个想法）

-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg); /* opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/