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

How to make a curve on a rectangle#39;s top in css? only in top edge(如何在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中的矩形顶部制作曲线?仅在顶部边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！