问题
This is my 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;}
The output is 4 edges of hexagon is curved, but top and the bottom is not. I want to make all edge of hexagon curved. How to make top and bottom edge to be curved? or How to make the top edge of triangle to be curved?
http://jsfiddle.net/yR7zt/1
回答1:
I think you are looking for this.
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
回答2:
I understand this is a fairly old question, but I thought I'd add an answer to show more about how it works.
So, first off, we need to create a single element on the page. I have gone for a size of height:300px; width:180px; and a border radius of 10px. Just because I like the roundness of the number (forgive the pun). Giving this element a position:relative; means that we can herein position everything absolutely in relative terms to this div.
We then need to create two pseudo elements, with the same height and width as the parent.
Because the pseudo elements are exactly that, pseudo elements, we need to add a content: to them. And since because we can put stuff within the parent, we don't really need these, so set them to "";
this leads us onto how to create the hexagon, rather than the rectangle we currently have. To do that, we're going to have to include a rotation in order to generate the other sides of the hexagon. With there being 6 sides, and the angles needing to add to 360, we can rotate one of the pseudo element by 60 degrees. The other we'll rotate by -60 degrees (or 300degrees, if you'd prefer).
This leaves us with our 'hexagon' in which we can add some nice styling and hover animations as need be:
.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>Jsfiddle demo also available
回答3:
Try this way :(works in chrome and in 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>
回答4:
You can try this approach:
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/
回答5:
With your current code, using the triangle top and bottom, you can modify them slightly to give it a curved look. Add a width of 4px to #hexagon-circle:before and #hexagon-circle:after and reduce border-left and border-right by 2px each.
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;
}
It's not a true curve as it creates a straight line, however it gives the impression it might be curved when viewed in the context of the shape.
来源：https://stackoverflow.com/questions/24819717/how-to-make-a-curved-edge-hexagon-by-using-css