基本上我会尽量保持这个简单.
我试图做这样的事情(忽略任何设计方面,除了我说的):
.header-wrapper { display: flex; flex-direction: column; align-items: flex-end; } .header { background-color: #0091cc; border-radius: 20px; height: 100px; width: 90%; margin-bottom: 20px; } .circle { background-color: pink; height: 400px; width: 400px; border-radius: 50%; position: absolute; top: -100px; left: -100px; }
<div class="header-wrapper"> <div class="header"></div> <div class="header"></div> </div> <div class="circle"></div>
基本上问题是我看不出圆圈通过两个矩形连接并且有两种不同的颜色,就像在图像中一样.在仍然切出圆圈的其余部分时,会从矩形中溢出.
我希望这是有道理的.
提前致谢.
解决方法
我不得不改变你的标记.为了让旧标记起作用,它本来就太黑了.基本上我为每个标题指定了一个圆圈,并将溢出设置为隐藏在标题上.然后我玩top属性来决定我要显示的圆圈的哪个部分.左边的边框上出现了轻微的蓝色,但我确信不会花很长时间才弄清楚原因.
.header-wrapper { display: flex; flex-direction: column; align-items: flex-end; } .header { background-color: #0091cc; border-radius: 20px; height: 100px; width: 90%; margin-bottom: 20px; position: relative; overflow: hidden; } .circle { position: absolute; top: -100px; left: -100px; height: 200px; width: 200px; border-radius: 200px; background-color: #fff; } .circle.top { top: 0; } .yellow { background-color: yellow; } .pink { background-color: pink; }
<div class="header-wrapper"> <div class="header"> <div class="circle top pink"></div> </div> <div class="header"> <div class="circle yellow"></div> </div> </div>
原文地址:https://www.jb51.cc/html/225553.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。