与边界/大纲的六angular形状

我知道可以使用下面的代码创build一个六边形形状：

.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; } .hex { margin-top: 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; } 

我如何创build一个填充了一种颜色的六边形，并与另一个颜色概述？ 我试图摆弄它，但似乎不可能。

欢迎任何其他select，我想避免使用图像。

Answer 1

这是不可能的，因为六边形是通过伪元素由边界创build的。 另一种方法是在六边形内重叠六边形，从而达到相同的期望结果。

这是一个可以实现的例子 ：

在这里举个例子

HTML – 非常基本，为更多的边界继续相同的模式。

 <div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div> 

CSS （三层 – 两个内部元素）

从六边形类开始，定义形状/大小/颜色：

 .hex { margin-top: 70px; width: 208px; height: 120px; background: #6C6; position: relative; } .hex:before, .hex:after { content:""; border-left: 104px solid transparent; border-right: 104px solid transparent; position: absolute; } .hex:before { top: -59px; border-bottom: 60px solid #6C6; } .hex:after { bottom: -59px; border-top: 60px solid #6C6; } 

devise内部类并使用transform: scale()按比例减less内部元素的尺寸。 在这个例子中，使用比例尺scale(.8, .8) 。 如果你想要更厚的边界，减less数字; 相反，如果你想要更薄的边界，增加数字。

指定并覆盖颜色，同时增加z-index值以使元素向前。

 .hex.inner { background-color:blue; -webkit-transform: scale(.8, .8); -moz-transform: scale(.8, .8); transform: scale(.8, .8); z-index:1; } .hex.inner:before { border-bottom: 60px solid blue; } .hex.inner:after { border-top: 60px solid blue; } 

样式第二个嵌套的元素，本质上遵循上次相同的步骤。 没有什么值得使用的，因为它在一个已经缩放的元素中。 当然，你可以使用任何你想要的; 这只是一个基本的例子。

 .hex.inner2 { background-color:red; -webkit-transform: scale(.8, .8); -moz-transform: scale(.8, .8); transform: scale(.8, .8); z-index:2; } .hex.inner2:before { border-bottom: 60px solid red; } .hex.inner2:after { border-top: 60px solid red; } 

再次， 在这里生活的例子

Answer 2

这是另一种使用clip-pathfunction创build带边框（或轮廓）的六边形的方法。 在这个方法中，我们使用一个容器元素和一个比容器的尺寸（ height和width都小）的伪元素。 当相同的clip-path应用于两个元素时，容器元素的background-color仅在边缘处出现在伪元素后面，并使其看起来像形状的边框/轮廓。

优点：

• 六边形也可以具有渐变或图像（基本上是非纯色）作为background 。
• 形状是敏感的 ，可以自动适应容器尺寸的任何变化。

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon:before { top: 4px; /* border width */ left: 4px; /* border width */ height: calc(100% - 8px); /* 100% - (2 * border width) */ width: calc(100% - 8px); /* 100% - (2 * border width) */ background: #6c6; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .image:before { background: url(http://lorempixel.com/150/150/nature/1); } .double:after { top: 8px; left: 8px; height: calc(100% - 16px); width: calc(100% - 16px); background: black; } /* Just for demo */ .hexagon { display: inline-block; margin: 20px; } 

 <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

Answer 3

将六angular形放在另一个上面。 底部的黑色六边形和顶部的白色。

结果如下

jsFiddle在这里

只会像一个border

Answer 4

您可以使用scaleX和rotate变换仅创build一个元素。 这里使用了与这里使用的相同的方法，但在顶部有一个额外的伪元素。

小提琴

 body{font-size: 25px;} div { margin: 3em 0; width: 10em; height: 5.7736em; /*width / 2*0.866*/ background: orange; box-shadow: inset -1.22em 0 0 0 navy, inset 1.22em 0 0 0 navy, inset -2.44em 0 0 0 crimson, inset 2.44em 0 0 0 crimson; position: relative; } div:before, div:after { content: ''; position: absolute; background: inherit; width:4.08em; height:4.08em; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleX(1.73) rotate(45deg); -moz-transform: scaleX(1.73) rotate(45deg); -ms-transform: scaleX(1.73) rotate(45deg); transform: scaleX(1.73) rotate(45deg); } div:before { top: -4.08em; box-shadow: inset 0 1em 0 0 navy, inset 1em 0 0 0 navy, inset 0 2em 0 0 crimson, inset 2em 0 0 0 crimson; } div:after { bottom: 0; box-shadow: inset 0 -1em 0 0 navy, inset -1em 0 0 0 navy, inset 0 -2em 0 0 crimson, inset -2em 0 0 0 crimson; } 

 <div></div> 

Answer 5

刚刚发现这个链接到一个六边形devise师 ，你可以复制的HTML和CSS来得到你想要的。 以为我会留在这里为其他任何人通过这个职位。

所以使用这个工具，有一个绿色轮廓的白色六angular形：

 .hexagon { position: relative; width: 100px; height: 57.74px; background-color: #ffffff; margin: 28.87px 0; border-left: solid 5px #28bf20; border-right: solid 5px #28bf20; } .hexagon:before, .hexagon:after { content: ""; position: absolute; z-index: 1; width: 70.71px; height: 70.71px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 9.6447px; } .hexagon:before { top: -35.3553px; border-top: solid 7.0711px #28bf20; border-right: solid 7.0711px #28bf20; } .hexagon:after { bottom: -35.3553px; border-bottom: solid 7.0711px #28bf20; border-left: solid 7.0711px #28bf20; } 

 <div class="hexagon"></div>