如何在css中的矩形顶部绘制曲线？仅在上边缘 [英] How to make a curve on a rectangle's top in css? only in top edge

问题描述

我想创建以下形状：

I want to create the following shape:

重要：如果我使用边界半径，则会得到此结果（并且我不希望出现此结果）：

Important: if I use "Border Radius" I get this (and I do not want this result):

推荐答案

以下是演示

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中的矩形顶部绘制曲线？仅在上边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！