Question

我想在myStyle类的底部添加半圈。以下是代码，它为我提供了类顶部的外边框，但我还需要底部的内圈。我认为消极边界是我们可以使用的概念，但不确定如何使用它。

预期结果应如下图所示：

但是现在我得到的结果如下：

{

<style>
    #myStyle {
        width: 88px; 
        height: 106px; 
        background: yellow;
        border-top-left-radius: 140px 150%;
        border-top-right-radius: 165px 147%;
    }

</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">Ss</h5>
</div>
</body>

}

Answer 1

你说得对，可以使用边框属性来完成。请查看下面的代码段。

#myStyle {
   position: relative;
   width: 88px; 
   height: 106px; 
   background: red;
   border-top-left-radius: 140px 150%;
   border-top-right-radius: 165px 147%;
}
#myStyle:after {
   position: absolute;
   bottom: 0;
   display: block;
   content: '';
   width: 88px;
   height: 44px;
   border-radius: 44px 44px 0 0;
   background: white;
}

<div id="myStyle"></div>

Answer 2

在#myStyle下面添加一个div，即半圈并在其上使用此css

div{
     margin-top: -45px;
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     background:white;
}

如何使用CSS在Div的底部绘制半圆

2 个答案: