带边框/轮廓的六边形

Question

我知道可以使用以下代码创建六边形：

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

如何创建一个用一种颜色填充并用另一种颜色勾勒出轮廓的六边形？ 我正在尝试摆弄它，但这似乎是不可能的。

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

Answer 1

直接通过伪元素创建六边形是不可能实现这一点的。 另一种方法是在六边形内叠加六边形，从而获得相同的期望结果。

以下是可以实现的示例 ：

这里的实际例子

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

设置内部类的样式并使用transform: scale()按比例减小内部元素的尺寸。 在此示例中，使用比例尺scale(.8, .8) 。 如果你想要更厚的边框，减少数字; 相反，如果您想要更薄的边框，请增加数字。

指定并覆盖颜色，还会增加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;
}

设置第二个嵌套元素的样式，基本上遵循与上次相同的步骤。 使用相同的scale值是没有价值的，因为它在已经缩放的元素内。 当然，你可以随意使用任何东西; 这只是一个基本的例子。

.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-path功能创建带边框（或轮廓）的六边形的另一种方法。 在这个方法中，我们使用容器元素和一个伪元素，它具有比容器更小的尺寸（ 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> 

主要缺点是目前浏览器支持不佳 。 CSS clip-path目前在IE和FF中不起作用。 可以通过对clip-path使用SVG（内联或外部）来修复FF的问题（如下面的代码段所示）：

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: url(#hexagon-clip); clip-path: url(#hexagon-clip); } .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; } .image:before { background: url(http://lorempixel.com/200/200); } .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; } 

 <svg width="0" height="0"> <defs> <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox"> <path d="M0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0, 0.25z" /> </clipPath> </defs> </svg> <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

Answer 3

完成将六边形放在另一个上面。 底部是黑色六边形，顶部是白色。

这是结果

jsFiddle在这里

只会像border

Answer 4

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

小提琴

 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> 

您甚至可以在悬停到此六边形时添加过渡效果： 小提琴（悬停过渡）

这里使用box-shadows的缺点是它们在Firefox上创建了可见的锯齿状边缘。

Answer 5

刚刚找到这个六角形设计师的链接，你可以复制html和css来获得你想要的东西。 以为我会留在这里给其他遇到这篇文章的人。

因此，使用该工具，要有一个绿色轮廓的白色六边形：

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

Answer 6

我通过使用三个不同的元素来制作它并且可以正常工作这是最简单的方法，您可以使用默认的 html 边框

 <.Doctype HTML> <html > <head > <title >hexagon with border</title> <style >,hexinner.,hexinner2.:hexinner3{ width; 208px: height; 120px: background; #6C6: position; fixed: left;30%: top; 30%: border-left;solid red 3px: border-right;solid violet 4px. }:hexinner2{ transform; rotate(60deg). }:hexinner3{ transform; rotate(-60deg); } </style> </head> <body > <h3 class="hexinner"> </h3> <h3 class="hexinner2"> </h3> <h3 class="hexinner3"> </h3> </body> </html>

Answer 7

如果像我一样，你不喜欢纯粹为了风格而拥有 HTML 个元素的想法，这里有一个只使用一个元素的解决方案，允许你在里面拥有任何你想要的东西：

 .hexagon { position: relative; height: 150px; width: 150px; /* We cut the element in an hexagonal shape */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }.hexagon::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: black; clip-path: polygon( /* We first go around the pseudo element to recreate the hexagon */ 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, /* We make sure to close the hexagon and go back to the start */ 50% 0%, /* We then go down inside the hexagon (feel free to change the border size, here it is of 10px)*/ 50% 10px, /* We finally go around the pseudo element in reverse to carve a smaller hexagon inside */ /* 0.49999999999999994 is sin(30deg) as it's only supported in Safari for now */ 10px calc(25% + 10px * 0.49999999999999994), 10px calc(75% + 10px * -0.49999999999999994), 50% calc(100% - 10px), calc(100% - 10px) calc(75% + 10px * -0.49999999999999994), calc(100% - 10px) calc(25% + 10px * 0.49999999999999994), 50% 10px ); }

 <div class="hexagon"> <image src="https://picsum.photos/150"/> </div>