Question

我为图像制作了一个六边形容器，但我无法想象如何在其上添加更多光滑/弯曲的边缘。

我希望有人可以帮助我。

.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中的六边形上获得平滑的egdes

1 个答案: