如何使用CSS制作弯曲的六边形

Question

这是我的CSS.

CSS

#hexagon-circle { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    border-radius: 10px;} 
#hexagon-circle:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 29px solid red;
    border-radius: 10px;} 
#hexagon-circle:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;}

输出是四边形的六边形是弯曲的,但顶部和底部不是.我想让六边形的所有边缘弯曲.如何使顶部和底部边缘弯曲？或如何使三角形的顶边弯曲？

http://jsfiddle.net/yR7zt/ 1

Answer 1

我想你正在寻找这个.

CSS

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hex:before {
   -webkit-transform: rotate(60deg);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);
}

小提琴

请在问题之前再搜索一下.没有恶意 :)

Answer 2

我将考虑我在之前的答案中使用的相同技巧，我将使用以下方法构建六边形clip-path

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 90%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

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

然后我将应用 SVG 过滤器：

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 86.6%; /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

并且在相反的方向

.hex {
  width: 200px;
  display: inline-block;
  margin:0 5px;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 115%; /* 100%/cos(30)  */
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Answer 3

我明白这是一个相当古老的问题,但我想我会添加一个答案,以显示更多关于如何它的工作原理.

所以,首先,我们需要在页面上创建一个元素.我已经去了一个大小height:300px; width:180px;和10px的边界半径.只是因为我喜欢数字的圆度(原谅双关语).赋予这个元素一个position:relative;意味着我们可以在这里absolute以相对的方式定位所有内容.

然后,我们需要创建两个伪元素,其高度和宽度与父元素相同.

因为伪元素正是伪元素,我们需要content:向它们添加一个.因为我们可以把东西放在父母中,所以我们并不需要这些,所以将它们设置为"";

这引导我们如何创建六边形,而不是我们目前拥有的矩形.要做到这一点,我们将不得不包括一个旋转,以生成六边形的其他边.由于有6个边,并且需要添加到360的角度,我们可以将其中一个伪元素旋转60度.另一个我们将旋转-60度(或300度,如果你愿意的话).

这给我们留下了'hexagon',我们可以根据需要添加一些漂亮的样式和悬停动画:

.roundHex {
  position: relative;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  height: 300px;
  width: 180px;
  transition: all 1s;
  line-height:300px;
  text-align:center;
  color:white;
  font-size:20px;
}
.roundHex:before,
.roundHex:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  z-index:-1;
}
.roundHex:before {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
  transition: all 1s 0.5s;
}
.roundHex:after {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  transform: rotate(-60deg);
  transition: all 1s 1s;
}
.roundHex:hover {
  background: tomato;
}

<div class="roundHex">HOVER ME</div>

Jsfiddle演示也可用