CSS CSS3 六边形

Question

提问by cycero

Can such a hexagon be created with pure CSS3?

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

enter image description here

在此处输入图片说明

Thanks for any help!

谢谢你的帮助！

Answer 1

回答by Kyle Yeo

A simple search turned this up: CSS Hexagon Tutorial

一个简单的搜索就找到了：CSS Hexagon Tutorial

Referenced from the site:

参考自网站：

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;

Answer 2

回答by Hushme

in CSS3, everything is possible.

在 CSS3 中，一切皆有可能。

HTML:

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:

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

Demo:http://jsfiddle.net/kizu/bhGn4/

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

Answer 3

回答by kslyce

You can use this scss-mixin to create a hexagon with a border. Creates a hexagon in any size or color.

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

HTML Markup:

HTML 标记：

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

1) simple method:

1）简单的方法：

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

where:

在哪里：

width = width of your hexagon
color = border-color
rotation = rotation
border = width of border

radius = border-radius (rounds corners slightly)

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

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

半径 = 边界半径（稍微圆角）

@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) advanced method: - this is better if your hexagon changes in size or color. it allows you to change only a portion of the properties (ex. hex_size when screen size changes)

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

note: div.hex-contentmay not be aligned property, you can set the topproperty to fix that.

注意：div.hex-content可能不是对齐属性，您可以设置top属性来修复它。

Answer 4

回答by Devil Bro

you can do gradient hexagon by pure html and css.

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

Here is HTML & CSS Code :

这是 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>

Answer 5

回答by Nick Grealy

You can use the html character ⬢(hexagon)...

您可以使用 html 字符⬢（六边形）...

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

.hex2::before {
  content: "B22";
  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" />

Or play with the clipping paths...

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

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>

Or you can try CSS, using ::beforeand ::afterwith triangle borders...

或者您可以尝试使用 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; 
}

<div class="hexagon">here is some content inside the hex if you want...</div>

Answer 6

回答by krishna

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

CSS CSS3 六边形

提问by cycero

回答by Kyle Yeo

回答by Hushme

回答by kslyce

回答by Devil Bro

回答by Nick Grealy

回答by krishna

相关推荐

最近更新

标签

CSS CSS3 六边形

提问by cycero

回答by Kyle Yeo

回答by Hushme

回答by kslyce

回答by Devil Bro

回答by Nick Grealy

回答by krishna

相关推荐

CSS Bootstrap：将一些导航栏项目居中

如何覆盖在伪元素上设置的 CSS？

CSS 位置：固定在 iPad 和 iPhone 上不起作用

CSS 比较 chrome 和 Firefox 的字体大小问题

相关推荐

最近更新

标签