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

Question

我可以做钻石，但我不知道如何嵌套钻石。我希望有一个使用CSS Diamonds的网站，我附上了一张图片，以便更好地了解我正在做的事情

到目前为止，这是我的HTML：http://codepen.io/thehung1724/pen/JBaIE

HTML：

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

LESS：

.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;       
    }
}
}

Answer 1

同时使用:before和:after伪元素。

示例：http://jsfiddle.net/8efLr/1/

.feature-icon {
    width: 100px;
    height: 100px;
    position: relative;
    margin-top: 25px;
    display: inline-block;
}
.feature-icon:before{
    position: absolute;
    display:block;
    content: "";
    width:100px;
    height:100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #444444;
    -webkit-transform: rotate(45deg);
    -webkit-transition: border-color 0.3s;
}
.feature-icon:after {
    position: absolute;
    display:block;
    content: "";
    width:100px;
    height:100px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin-top:-5px;

    border: 1px solid #444444;
    -webkit-transform: rotate(45deg);
    -webkit-transition: border-color 0.3s;
}

Answer 2

旋转不起作用吗？

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