我试图得到这个形状:
到目前为止我有this.有没有办法使用CSS获得此效果?我认为负半径可能会起作用.
div { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; min-width: 200px; border-radius:10% / 70%; background-color: red; }
<div> Board </div>
解决方法
我喜欢这样的东西,因为我总是乱搞这样的东西.所以我会这样做.使用:before和:在我们可以创建这个形状之后,我们使用它们创建一个坐在div顶部的形状,颜色与背景相同.这将使它看起来像你想要的形状.
制作:之前和之后:大小之后得到你想要的尺寸(改变宽度和高度).
div { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; min-width: 200px; border-radius: 20px; background-color: red; position: relative; } div:before,div:after { content: ""; display: block; width: 96%; height: 20px; border-radius: 50%; background: #fff; position: absolute; margin: auto; } div:before { top: -17px; left: 0; right: 0; } div:after { bottom: -17px; left: 0; right: 0; }
<div>Board</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。