我如何在CSS中製作完整的膠囊

我想在css中創建完整的膠囊，但我沒有得到預期的結果。可以anynody幫助我解決這個問題。我在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>

預期結果：

實際結果：

來源

2017-02-15 Swapnil Chidrawar

以下是更新的摘要可以去除#myStyle:after和使用border-radius爲#myStyle。

<style> 
 
    #myStyle { 
 
     position: relative; 
 
     width: 60px; 
 
     height: 101px; 
 
     background: #f5d540; 
 
     border-radius: 500px; 
 
    } 
 
    
 
</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>

來源

2017-02-15 07:08:29 aje

#myStyle { 
    background: red; 
    border: 1px solid #94c640; 
    box-shadow: none; 
    color: #ffffff; 
    border-radius: 15px; 
    padding: 5px 10px; 
}

這將創建一個膠囊

來源

2017-02-15 07:08:47 Sameer

我如何在CSS中製作完整的膠囊

回答

相關問題