我正在尝试在 css 中创建完整的胶囊，但我没有得到预期的结果。任何人都可以帮我解决这个问题。我是 css 的新手
以下是我的代码:
<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;"></h5>
</div>
</body>
预期结果:
实际结果:
最佳答案
#myStyle {
background: red;
border: 1px solid #94c640;
box-shadow: none;
color: #ffffff;
border-radius: 15px;
padding: 5px 10px;
}
这将创建一个胶囊
关于html - 我如何在 CSS 中制作完整的胶囊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42242623/