html – 如何使用CSS制作弯曲的边缘六边形
发布时间:2020-12-14 23:50:06 所属栏目:资源 来源:网络整理
导读:这是我的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
这是我的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 请在问题之前再搜索一下.没有恶意 :) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |