带边框/轮廓的六角形 [英] Hexagon shape with a border/outline

问题描述

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

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

如何创建一个填充有一种颜色的六角形， ？

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

解决方案

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

这里是

HTML / p>

 < 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 value来使元素向前。

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

再次， 此处的实例

I know it's possible to create a hexagon shape using the following code:

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

How can I create a hexagon that's filled with one color, and outlined with another? I'm trying to fiddle with it, but it does not seem to be possible.

Any other alternatives are welcome, I would like to avoid using images.

解决方案

It is not directly possible to achieve this, as hexagons are created by borders through pseudo elements. An alternative would be to overlay hexagons within hexagons, thus achieving the same desired results.

Here is an example of what can be achieved:

LIVE EXAMPLE HERE

HTML - pretty basic, continue the same pattern for more borders.

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

CSS (three layers - two inner elements)

Start with the hexagon class, defining the shape/size/colors:

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

Style the inner class and use transform: scale() to proportionally decrease the dimensions of the inner elements. In this example, a scale of scale(.8, .8) is used. If you want thicker borders, decrease the numbers; conversely, if you want thinner borders, increase the numbers.

Specify and overwrite the colors, also increase the z-index value to bring the element forward.

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

Style the second nested element, essentially following the same steps as last time. It's worth nothing that the same scale value is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.

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

Again, live example here

这篇关于带边框/轮廓的六角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！