css 带边框/轮廓的六边形形状

sshcrbum 于 2022-11-19 发布在其他

关注(0)|答案(7)|浏览(236)

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

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

如何创建一个六边形，填充一种颜色，轮廓用另一种颜色？我试图摆弄它，但似乎不可能。
欢迎使用任何其他替代方案，我想 * 避免 * 使用图像。

css

来源：https://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline

7条答案

按热度按时间

z31licg01#

这是不***直接***可能实现的，因为六边形是由通过伪元素的边界创建的。一种替代方法是在六边形中覆盖六边形，从而实现相同的预期结果。
以下是可以实现的example：
x1c 0d1x

LIVE EXAMPLE HERE（第一个字母）

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

同样，live example here

赞(0）回复(0）举报 2022-11-19

rwqw0loc2#

下面是创建带边框六边形的另一种方法在这个方法中，我们使用一个容器元素和一个具有较小尺寸的伪元素。（height和width）的值。当相同的clip-path套用至两个元素时，容器元素的background-color仅在边缘处在伪元素后面可见，并且使其看起来像形状的边界/轮廓。

优点：

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

第一个

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

第一次

赞(0）回复(0）举报 2022-11-19

piok6c0g3#

完成了将六边形放在另一个形状的顶部。其中黑色六边形在底部，白色在顶部。
结果如下

jsFiddle here
只会像个border

赞(0）回复(0）举报 2022-11-19

4xrmg8kj4#

你可以使用scaleX和rotate转换，只使用一个元素来创建它。这使用了与here相同的方法，但是在上面多了一个伪元素。

第一个
您甚至可以添加悬停过渡效果到这个六边形：******

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

赞(0）回复(0）举报 2022-11-19

vd2z7a6w5#

刚刚找到这个链接到一个hexagon designer，你可以复制html和css从得到你想要的。我想我会离开这里给任何其他人看到这篇文章。
因此，使用该工具，可以得到一个带有绿色轮廓的白色六边形：
第一个

赞(0）回复(0）举报 2022-11-19

uqcuzwp86#

我使用了三个不同的元素，并且完全正常这是最简单的方法，您可以使用默认的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>

赞(0）回复(0）举报 2022-11-19

jbose2ul7#

如果您像我一样，不喜欢HTML元素纯粹用于样式的想法，这里有一个只使用一个元素的解决方案，允许在其中包含您想要的任何内容：
第一个

赞(0）回复(0）举报 2022-11-19