html - 如何使用 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>

减少:

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