如何叠加内嵌的CSS形状？

Question

我一直在尝试使用带有复选标记的纯CSS创建一个六边形边框。

我发现Hexagon shape with a border/outline和JoshC的答案值得追求。 I created a fiddle一直试图让形状表现为内联。我打算在完成后将其转换为使用em vs px。

我可以让三个中的两个正确定位而不是第三个定位。我还没有尝试过我的支票。我已经使用了JoshC的CSS并创建了一个基类来最小化重复设置。并取得了进展，但我没有成功。基本前提是在这里，小提琴更多涉及。形状下方还有白色空间。

✔
<div class="hex hex1"></div>
<div class="hex hex2"></div>
<div class="hex hex3"></div>

Body{font-size:24px;}
.hex:before{content:"";width:0;height:0;border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;position:absolute;top:-30px;left:0;}
.hex{margin-top:30px;margin-bottom:30px;width:104px;height:60px;background-color:#6C6;position:relative;}
.hex:after{content:"";width:0;position:absolute;bottom:-30px;border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex1:before{border-bottom:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex1{background-color:#6C6;position:relative;}
.hex1:after{border-top:30px solid #6C6;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex2:before{border-bottom:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex2{background-color:red;position:relative;top:0;-webkit-transform:scale(.6);-moz-transform:scale(.6);transform:scale(.6);z-index:3;}
.hex2:after{border-top:30px solid red;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

.hex3:before{border-bottom:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;}
.hex3{background-color:blue;position:relative;top:-90px;-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);transform:scale(.8,.8);}
.hex3:after{border-top:30px solid blue;border-left:52px solid transparent;border-right:52px solid transparent;left:0;}

根据fiddle的答案更新了我的GCyrillus！我添加了-webkit-transform：scale for chrome。

Answer 1

怎么样：

<div class="hex hex1">
    <div class="hex hex2">
        <div class="hex hex3">
              ✔
        </div>
    </div>
</div>

http://codepen.io/gc-nomade/pen/xEFaB

嵌套你的元素并使用less relative / top：-xx;它将更容易站在流程中