可以用纯CSS3创建这样的六边形吗?
谢谢你的帮助!
一个简单的搜索转向了这个: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;
在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;
}
但是:Kua zxsw指出
您可以使用此scss-mixin创建带边框的六边形。创建任何大小或颜色的六边形。
HTML标记:
http://jsfiddle.net/kizu/bhGn4/
1)简单的方法:
<div class="hex-holder">
<div class="hex"></div>
<div class="hex-content"></div> (<-- optional)
</div>
哪里:
div.hex-holder{
@import hexagon($width, $color, $rotation, $border, $radius)
}
2)先进的方法: - 如果六边形的大小或颜色发生变化,这样会更好。它允许您只更改一部分属性(例如,当屏幕大小更改时,hex_size)
@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);
}}
注意: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
你可以通过纯HTML和CSS做渐变六边形。
这是HTML和CSS代码:
#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;
}
.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: '';
}