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

【问题标题】：How to create nested diamond shape using CSS?如何使用 CSS 创建嵌套的菱形？
【发布时间】：2014-05-29 02:35:22
【问题描述】：

我可以做钻石，但我不知道如何嵌套钻石。我想要一个使用 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;       
    }
}
}

【问题讨论】：

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

标签： html css shape css-shapes

【解决方案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;
}

【讨论】：

【解决方案2】：

旋转不行吗？

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

【讨论】：