如何在css中制作底部完整的圆圈答案

【问题标题】：How to make bottom part Complete circle in css如何在css中制作底部完整的圆圈
【发布时间】：2017-02-14 03:34:48
【问题描述】：

如何让底部完成半圈

我有以下代码，它给出了正确的形状：

<style>
     #myStyle {
        position: relative;
        width: 75px; 
        height: 113px; 
        background: #f5d540;
        border-top-left-radius: 183px 150%;
        border-top-right-radius: 201px 147%;
    }
    #myStyle:after {
        position: absolute;
        bottom: 0;
        display: block;
        content: '';
        width: 75px;
        height: 44px;
        border-radius: 44px 44px 0 0;
        background: white;
    }
</style>
<body ng-app="">
    <p> Insert Some text in the Text Field </p>
    <p> Enter The Text <input type="text" ng-model="name" placeholder="Enter the Name"> </p>
    <h1> Hi {{name}}</h1>
<div class="myStyle" id="myStyle">
    <h5 style="text-align:center;padding-top: 10px;">Energia</h5>
</div>
</body>

以上代码的答案如下：

现在我正在更改代码以减少宽度和高度，如下所示：

#myStyle {
        position: relative;
        width: 60px; 
        height: 101px; 
        background: #f5d540;
        border-top-left-radius: 183px 150%;
        border-top-right-radius: 201px 147%;
    }
    #myStyle:after {
        position: absolute;
        bottom: 0;
        display: block;
        content: '';
        width: 75px;
        height: 44px;
        border-radius: 44px 44px 0 0;
        background: white;
    }

所以现在底部不是完整的圆圈。任何人都可以帮我解决这个问题，因为我是 html css 的新手。

【问题讨论】：

你试过调整border-top-*-radius旁边的值吗？
stackoverflow.com/questions/22421880/…的可能重复
是的，我尝试过，但没有为我工作
你的第一个代码块的结果看起来不像开始的屏幕截图。
对不起。我已经更新了我的代码。急需，请您检查一次。谢谢

标签： html css

【解决方案1】：

#myStyle 的宽度为 60px，而 #myStyle:after 的宽度为 75px。只需让它们相同即可。

<style>
  #myStyle {
    position: relative;
    width: 60px;
    height: 101px;
    background: #f5d540;
    border-top-left-radius: 183px 150%;
    border-top-right-radius: 201px 147%;
  }
  #myStyle:after {
    position: absolute;
    bottom: 0;
    display: block;
    content: '';
    width: 60px;
    height: 44px;
    border-radius: 44px 44px 0 0;
    background: white;
  }
</style>

<body ng-app="">
  <p>Insert Some text in the Text Field</p>
  <p>Enter The Text
    <input type="text" ng-model="name" placeholder="Enter the Name">
  </p>
  <h1> Hi {{name}}</h1>
  <div class="myStyle" id="myStyle">
    <h5 style="text-align:center;padding-top: 10px;">Energia</h5>
  </div>
</body>

【讨论】：

非常感谢……它对我有用。你是摇滚明星
别担心，我的朋友，尽可能接受答案。