如何在css中的矩形顶部制作曲线?仅在顶部边缘

2022-01-14 00:00:00 geometry curve css css-shapes

我想创建以下形状:

重要提示:如果我使用边界半径"，我会得到这个(我不想要这个结果):

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;
}

相关文章