<分区>
css - CSS3 中的圆弧/曲线而不是图像 - 边界半径？
标签 css css-shapes
我得到了一个带有顶部和底部选项卡的设计(参见片段图片)。他们从曲线开始。我不想使用图形，而是想使用 CSS 来实现这一点，但它必须与设计完全一致(顶部曲线与底部曲线相反)。
我觉得它是可以实现的，但它可能是一个非常肮脏的 hack，就像 div 内的一个圆圈与隐藏的 div 重叠的任何东西，嗯。有 CSS 高手可以提供建议吗？
最佳答案
你可以用一个伪元素来做:
body {
background: pink;
}
.someElement {
background: purple;
height: 30px;
}
.someElement:before {
content: "";
width: 15px;
height: 32px;
background: pink;
border-radius: 0 0 100% 0;
display: block;
}<div class="someElement"></div>关于css - CSS3 中的圆弧/曲线而不是图像 - 边界半径？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28632209/