我如何使底部完成半圈
我有以下代码可以给出正确的形状:
<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 的新手。
最佳答案
#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>关于html - 如何在CSS中制作底部完整的圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42211416/