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

fiddle

请在问题之前再搜索一下。没有冒犯：）

Answer 2

我知道这是一个相当古老的问题，但我想我会添加一个答案，以显示更多关于的工作原理。

所以，首先，我们需要在页面上创建一个元素。我的大小为height:300px; width:180px;，边界半径为10px。只是因为我喜欢数字的圆度（原谅双关语）。给这个元素position:relative;意味着我们可以在这里以相对的方式将所有absolute定位到这个div。

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

因为伪元素正是伪元素，我们需要向它们添加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 demo also available

Answer 3

我将考虑我在 the previous answer 中使用的相同技巧，其中我将使用 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 4

尝试这种方式:(适用于chrome和in 10）

<br><br><br>
<div id="hexagon-circle"></div>
<style>
 #hexagon-circle {
    position: relative;
    margin: 1em auto;
    width: 10em; height: 17.32em;
    border-radius: 1em/.5em;
    opacity: .25;
    background: orange;
    transition: opacity .5s;
    cursor: pointer;
 }
 #hexagon-circle:before, #hexagon-circle:after {
    position: absolute;
    width: inherit; height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
  }
  #hexagon-circle:before {
   transform: rotate(60deg);
   -ms-transform:rotate(60deg); /* IE 9 */
   -webkit-transform:rotate(60deg); /* Opera, Chrome, and Safari */
  }
  #hexagon-circle:after {
    transform: rotate(-60deg);
    -ms-transform:rotate(-60deg); /* IE 9 */
    -webkit-transform:rotate(-60deg); /* Opera, Chrome, and Safari */
  }

  </style>

Answer 5

您可以尝试这种方法：

CSS

#hexagon-circle { 
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: red;
transition: opacity .5s;
cursor: pointer;} 

#hexagon-circle:before { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(60deg);  /* IE 9 */
transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */

#hexagon-circle:after { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(-60deg);  /* IE 9 */
transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */

<强>样本

http://jsfiddle.net/yR7zt/4/

Answer 6

使用当前代码，使用三角形顶部和底部，您可以稍微修改它们以使其具有弯曲的外观。将4px的宽度添加到#hexagon-circle:before和#hexagon-circle:after，并将border-left和border-right各减少2px。

Js Fiddle here

#hexagon-circle { 
  width: 100px; 
  height: 55px; 
  background: red; 
  position: relative;
  border-radius: 10px;
}

#hexagon-circle:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-bottom: 29px solid red;
  border-radius: 10px;
}

#hexagon-circle:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-top: 29px solid red;
  border-radius: 10px;
}

它不是一条真正的曲线，因为它会创建一条直线，但是当它在形状的上下文中查看时，它会给人一种弯曲的印象。

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

6 个答案: