本文介绍了如何在css中的矩形顶部制作曲线?仅在顶部边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我想创建以下形状:
重要提示:如果我使用边界半径"，我会得到这个(我不想要这个结果):
Important: if I use "Border Radius" I get this (and I do not want this result):
推荐答案
这里有DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
这篇关于如何在css中的矩形顶部制作曲线?仅在顶部边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！