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

【问题标题】：How to make a curved edge hexagon by using CSS如何使用 CSS 制作弯曲的边缘六边形
【发布时间】：2014-09-09 06:42:45
【问题描述】：

这是我的 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;}

输出是六边形的 4 个边是弯曲的，但顶部和底部不是。我想让六边形的所有边缘弯曲。如何使顶部和底部边缘弯曲？或者如何使三角形的上边缘弯曲？

http://jsfiddle.net/yR7zt/1

【问题讨论】：

请也发布相关的html，或发Fiddle。
jsfiddle.net/yR7zt 谢谢@Ullas
您用来制作六边形的方法不允许您制作弯曲的顶部和底部。您可以为您的项目使用 Css 转换属性吗？

标签： html css css-shapes

【解决方案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

【讨论】：

这是我见过的最奇怪的六边形。
这就是我的意思。在 Firefox 中似乎没问题。

【解决方案2】：

我知道这是一个相当老的问题，但我想我会添加一个答案来展示更多关于如何它的工作原理。

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

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

因为伪元素就是这样，伪元素，我们需要给它们加上一个content:。因为我们可以把东西放在父元素中，所以我们真的不需要这些，所以将它们设置为"";

这将引导我们了解如何创建六边形，而不是我们目前拥有的矩形。为此，我们将不得不包含一个旋转以生成六边形的另一边。由于有 6 条边，并且需要添加 360 的角度，我们可以将伪元素之一旋转 60 度。另一个我们将旋转 -60 度（或 300 度，如果您愿意的话）。

这给我们留下了“六边形”，我们可以根据需要在其中添加一些漂亮的样式和悬停动画：

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

&lt;div class="roundHex"&gt;HOVER ME&lt;/div&gt;

Jsfiddle demo also available

【讨论】：

【解决方案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%);
}

&lt;div class="hex"&gt;&lt;/div&gt;

然后我将应用 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>

【讨论】：

这对我有帮助！非常感谢 Temani。

【解决方案4】：

试试这个方法：（适用于 chrome 和 ie 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>

【讨论】：

这是我的荣幸@sooko1005

【解决方案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/

【讨论】：

为什么你们不使用 W3C 制定的标准方法（CSS3 属性）。每个人都在为 chrome 使用供应商前缀 -webkit。或者您对其他浏览器没有任何顾虑。我刚刚在 FF30 中看到并震惊它不起作用然后我注意到只有前缀用于 Chrome。使用标准属性并记下为其他浏览器添加供应商前缀是一个好习惯。
是的，我同意……尽管“震惊”似乎有些夸张。请记住，这不是我们为客户解决和交付准备部署代码的站点。有时在我们的小提琴中，我们会解释如何解决问题，然后由用户在测试后修复这些细节。显然我知道前缀，但在这种情况下，我只是快速编辑他的小提琴，向他展示一个可能的解决方案。
但乍一看，当我看到您的演示时，它不起作用。请使用标准方法。除了节省时间，您还可以简单地添加一行文字please add vendor prefix for cross browser solution
谢谢@AlexIncarnati
好的，我已经编辑了答案。现在是跨浏览器。 :)

【解决方案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;
}

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

【讨论】：