如何使用CSS制作一个曲线边六angular形

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

输出是六边形的四边是弯曲的，但是顶部和底部不是。 我想使六angular形的所有边缘弯曲。 如何使上下边缘弯曲？ 或如何使三angular形的顶部边缘弯曲？

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

小提琴

请问下一个问题，然后再问一下。 没有恶意 ：）

Answer 2

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

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

然后，我们需要创build两个伪元素，它们的高度和宽度与父级相同。

由于伪元素就是伪元素，我们需要添加一个content:给他们。 因为我们可以把东西放在父母身上，所以我们并不需要这些东西，所以把它们设置为"";

这导致我们如何创build六边形，而不是我们目前拥有的矩形。 要做到这一点，我们将不得不包括一个旋转，以便生成六边形的其他边。 由于有6个边，而且需要加360度的angular度，我们可以将伪元素中的一个旋转60度。 另一个我们将旋转-60度（或300度，如果你愿意）。

这给我们留下了我们的“六边形”，我们可以根据需要添加一些漂亮的造型和hoveranimation：

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

Answer 3

尝试这种方式:(工作在铬和在即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 4

你可以试试这个方法：

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 */ 

DEMO

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

Answer 5

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

Js小提琴在这里

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

这不是一个真正的曲线，因为它创build了一条直线，但它给人的印象是，在形状的上下文中可能会弯曲。