这是我的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个边是弯曲的,但顶部和底部不是。我想使六边形的所有边缘弯曲。如何使上下边缘弯曲?或如何使三角形的上边缘弯曲?
我认为您正在寻找这个。
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);
}
我知道这是一个相当老的问题,但是我想我要添加一个答案以显示有关how >>它如何工作的更多信息。
因此,首先,我们需要在页面上创建一个元素。我的尺寸为height:300px; width:180px;
,边框半径为10px。仅仅因为我喜欢数字的圆度(原谅双关语)。给此元素一个position:relative;
意味着我们可以在此相对于该div定位所有absolute
ly。
然后我们需要创建两个伪元素,其高度和宽度与父元素相同。
因为伪元素正是伪元素,所以我们需要向它们添加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; }
<div class="roundHex">HOVER ME</div>
尝试这种方式:(适用于chrome和inie 10)
您可以尝试这种方法:
使用当前代码,使用三角形的顶部和底部,可以对其稍加修改以使其具有弯曲的外观。将4px
的宽度添加到#hexagon-circle:before
和#hexagon-circle:after
,然后将border-left
和border-right
分别减小2px
。