html – 如何使用CSS制作弯曲的边缘六边形

概述这是我的CSS. CSS #hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px;} #hexagon-circle:before { content: ""; position: 这是我的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个边缘弯曲,但顶部和底部不是.我想让六边形的所有边缘弯曲.如何使顶部和底部边缘弯曲？或如何使三角形的顶边弯曲？

http://jsfiddle.net/yR7zt/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);}

fiddle

请在问题之前再搜索一下.没有恶意 ：)

总结

以上是内存溢出为你收集整理的html – 如何使用CSS制作弯曲的边缘六边形全部内容，希望文章能够帮你解决html – 如何使用CSS制作弯曲的边缘六边形所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。