使用 CSS3 的六边形答案

【问题标题】：Hexagon shape with CSS3使用 CSS3 的六边形
【发布时间】：2020-04-01 18:32:52
【问题描述】：

这样的六边形可以用纯 CSS3 创建吗？

感谢您的帮助！

【问题讨论】：

只有一个元素？不要这么想。但是如果你使用更多的元素，你可以。
不止一个。任何数量都足够了，如果可行的话:) 没有什么与这个类似的东西了。
Generate repeating hexagonal pattern with CSS3 的可能重复项
@putvande 提出的很棒的链接问题也可能会有所帮助。
Creating a hexagon in CSS, symmetry、Generate repeating hexagonal pattern with CSS3、Hexagonal patten with CSS、Creating Hexagons in css / html 和更多的可能重复。搜索功能确实有效。

标签： css css-shapes

【解决方案1】：

一个简单的搜索发现了这个：CSS Hexagon Tutorial

引用自网站：

Put a 104px × 60px div with a background colour between them and you get (the hexagon):

width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

width: 104px;
height: 60px;
background-color: #6C6;

width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

【讨论】：

【解决方案2】：

可以使用html字符&#x2B22;（六边形）...

.hex1::before {
  content: "\2B22";
  color: orange;
  font-size:135px;
}

.hex2::before {
  content: "\2B22";
  display:block;
  color: magenta;
  font-size:135px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

<span style="color:blue; font-size:135px;">&#x2B22;</span>
  
<span class="hex1" />
  
<span class="hex2" />

或者玩一下剪切路径...

div {
  height: 100px;
  width: 100px;
}

.hex3 {
  background: red;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.hex4 {
  background: blue;
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

<div class="hex3"></div>

<div class="hex4"></div>

或者你可以尝试 CSS，使用带有三角形边框的 ::before 和 ::after...

.hexagon {
  height: 200px;
  width: 120px;
  background: red;
  position:relative;
  left:50px;
  box-sizing: border-box;
}
.hexagon::before, .hexagon::after {
  content:"";
  position: absolute;
  height: 0;
  width: 0; 
  top:0;
  /* half height */
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent; 
}
.hexagon::before {
  left:-50px;
  border-right:50px solid red; 
}
.hexagon::after {
  right:-50px;
  border-left:50px solid red; 
}

&lt;div class="hexagon"&gt;here is some content inside the hex if you want...&lt;/div&gt;

【讨论】：

【解决方案3】：

在 CSS3 中，一切皆有可能。

HTML：

<div class="hexagon hexagon1"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>    
<div class="hexagon dodecagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>

CSS：

BODY
{   background: url(http://placekitten.com/600/600)
}

.hexagon
{   overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}

.hexagon-in1
{   overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon-in2
{   width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/240/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon-in2:hover
{   background-image: url(http://placekitten.com/241/241)
}

.hexagon1
{   width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
}

.hexagon2
{   width: 200px;
    height: 400px;
    margin: -80px 0 0 20px;
}

.dodecagon
{   width: 200px;
    height: 200px;
    margin: -80px 0 0 20px;
}

演示： http://jsfiddle.net/kizu/bhGn4/

【讨论】：

出于演示目的发布 jsFiddle 链接是完全可以的，但也请在您的答案中包含必要的代码。我已经在这里为您完成了；请以此为未来的榜样。
@Cody gray 正在编辑代码是一种爱好，或者你会因此获得奖励......：D
@Hushme 我唯一得到的就是一个更好的网站。

【解决方案4】：

您可以使用这个 scss-mixin 创建一个带边框的六边形。创建任意大小或颜色的六边形。

HTML 标记：

<div class="hex-holder">
     <div class="hex"></div>
     <div class="hex-content"></div>  (<-- optional) 
</div>

1) 简单方法：

div.hex-holder{
    @import hexagon($width, $color, $rotation, $border, $radius)
}

地点：

width = 六边形的宽度
颜色 = 边框颜色
旋转 = 旋转
border = 边框宽度

radius = 边框半径（稍微圆角）

@mixin($width: 140px $color: black, $rotation: 0, $border: 3px, $radius: 10px){

$height: $width * tan(60deg) - $border*2 - $radius/2;      
$naturaldiameter: $width + 2 * cos(60deg);
position: relative;

div.hex {
    transform: rotate($rotation + deg);
    width: $width;
    height: $height;
    border-radius: $radius;
    position: relative;
    @include content-box();
    border-top: $border solid $color;
    border-bottom: $border solid $color;
    margin: auto;

    div.hex-content{
        max-width: $height;
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        top: 0;
        transform: rotate(-1*$rotation+deg);
    }
}

div.hex::after, div.hex::before{
    content: "";
    margin-top: $border * -1;
    transform: rotate(-60deg);
    display: block;
    position: absolute;
    border-top: $border solid $color;
    border-bottom: $border solid $color;
    width: $width;
    height: $height;
    border-radius: $radius;
}

div.hex::before{
    transform: rotate(60deg);
}}

2) 高级方法： - 如果六边形的大小或颜色发生变化，这会更好。它只允许您更改部分属性（例如，屏幕尺寸更改时的 hex_size）

div.hex-holder{
    @include hex_basics(30);
    @include hex_color($bordercolor1, $backgroundcolor1);
    @include hex_size($width1, $borderwidth1, $borderradius1);

     &:hover{
        @include hex_color($bordercolor2, $backgroundcolor2);
     }

     @media( query ){
         @include hex_size($width2, $borderwidth2, $borderradius2);
     }
}




@mixin hex_basics($rotation: 0){
    position: relative;

    div.hex{
        transform: rotate($rotation + deg);
        position: relative;
        @include content-box();
        margin: auto;
        border-top-style: solid;
        border-bottom-style: solid;
    }

    div.hex-content{
        position: absolute;
        z-index: 2;
        border-radius: 40%;
        width: 100%;
        height: 100%;
        top: 0;
        display: block;
    }
    div.hex::after, div.hex::before{
        content: "";
        transform: rotate(-60deg);
        display: block;
        position: absolute;
        border-top-style: solid;
        border-bottom-style: solid;
    }
    div.hex::before{
        transform: rotate(60deg);
    }
}

@mixin hex_size($width: 140px, $border-width: 3px, $radius: 10px){
    $height: $width * tan(60deg) - $border-width *2 - $radius/2;
    $naturaldiameter: $width + 2 * cos(60deg);

    div.hex::after, div.hex::before, div.hex{
        margin-top: $border-width * -1;
        border-top-width: $border-width;
        border-bottom-width: $border-width;
        width: $width;
        height: $height;
        border-radius: $radius;
    }
}

@mixin hex_color($border-color: black, $background-color: white){
    div.hex::after, div.hex::before, div.hex{
        border-top-color: $border-color;
        border-bottom-color: $border-color;
        background-color: $background-color;
    }
}

注意：div.hex-content 可能没有对齐属性，您可以设置top 属性来解决这个问题。

【讨论】：

【解决方案5】：

你可以用纯html和css做渐变六边形。

这是 HTML 和 CSS 代码：

.hexagon-shape {
        position: relative;
        overflow: hidden;
        background: transparent;
        /* add slash at the end of line to see the rhombus *
        outline: solid 1px red;/**/
        width: 72.28px;
        height: 72.28px;
        transform: rotate(-30deg) skewX(30deg) scaleY(.866);
    }
    .hexagon-shape:before {
        position: absolute;
        right: 6.7%;
        bottom: 0;
        left: 6.7%;
        top: 0;
        transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
        background: linear-gradient(59.82deg, #0976CE 0%, #0976CE 49.36%, #3A91D7 50.11%, #3A91D7 100%);
        content: '';
    }

<div class="hexagon-part">
    <div class='hexagon-shape'></div>
</div>

【讨论】：

【解决方案6】：

#hexagon
{   width: 100px;
    height: 55px;
    background: red;
    position: relative;
}

#hexagon:before
{   content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}

#hexagon:after
{   content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

【讨论】：