Question

如何让底部完成半圈

我有以下代码可以提供正确的形状：

<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的新手。

Answer 1

#myStyle的宽度为60px，而#myStyle:after为75px。只是让他们一样。

＆＃13;

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

＆＃13;

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

1 个答案: