如何解决使边界线弯曲
如何使边框的边框(不是角落,不是border-radius
)像预览一样弯曲?在使用transform: rotate
之前,有些问题,但是那样不可能使顶部变圆。目前,我的CSS是border-radius: 100px 100px 0px 0px
,所以顶部就像预览一样。但我找不到底部的制作方法
解决方法
您需要做的是将一个内部div嵌套在一个外部div内,并在内部一个div上应用不同的大小和边框-半径-但将外部div溢出-隐藏起来,这将使您拥有不同的曲线在顶部和底部-但是我同意您应该为此使用SVG的建议。
.outer {
height: 800px;
width: 500px;
overflow: hidden;
border: solid 1px black;
border-radius: 50% 50% 0 0;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.inner {
height: 600px;
width: 600px;
overflow: visible;
border: solid 1px black;
border-radius: 0 0 50% 50%;
position: relative;
top: -58.1%;
left: -50px
}
<div class="outer">
<div class="inner"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。