无法在 css 中获得六边形的平滑边缘

Question

我为图像制作了一个六边形容器，但我不知道如何在其上添加更多 smooth/curved 条边。

我希望有人能帮助我。

.hexagon {
  position: relative;
  width: 180px; 
  height: 103.92px;
  background-color: #64C7CC;
  margin: 51.96px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 51.96px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 51.96px solid #64C7CC;
}

<div class="hexagon"></div>

感谢您的帮助。

Answer 1

您可以使用带 z-index 和径向渐变的 div 实现类似的效果：

<div class="hexagon"></div>
<div class="circle"></div>

和css：

body {
  background-color: #eeeeee;
}

.circle {
  width: 240px;
  position: absolute;
  top:15px;
  height: 240px;
  z-index: 2;
  background: -webkit-radial-gradient(transparent 59%, #eeeeee 41%);
  background: -o-radial-gradient(transparent 59%, #eeeeee 41%); 
  background: -moz-radial-gradient(transparent 59%, #eeeeee 41%); 
  background: radial-gradient(transparent 59%, #eeeeee 41%); 
}


.hexagon {
  position: absolute;
  top: 31px;
  left: 38px;
  width: 180px; 
  height: 103.92px;
  background-color: #64C7CC;
  margin: 51.96px 0;
  z-index: -1;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;

}

.hexagon:before {
  bottom: 100%;
  border-bottom: 51.96px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 51.96px solid #64C7CC;
}

正文背景色属性只是将外面的渐变融入背景，去掉就可以自己看渐变了。虽然在 IE 9 及以下版本中不起作用....

JSFiddle

无法在 css 中获得六边形的平滑边缘

Can't get smooth egdes on a hexagon in css

html

css

css-shapes