谁能解释我如何使圆形div像这样的图像?
我试过了,但是结果却不一样:左右曲线应该不那么硬。
这是我的代码段:
.cnt {
margin: 0 auto;
border: 1px solid grey;
width: 300px;
height: 150px;
position: relative;
background-color: #4a4d84;
}
.t {
position: absolute;
width: 100%;
height: 50px;
background-color: red;
bottom: 0;
}
.t::before {
content: "";
position: absolute;
width: 100%;
height: 70px;
top:-30px;
background-color: red;
border-radius: 50% 50% 0 0;
}
<div class="cnt">
<div class="t">
</div>
</div>
你能帮助我吗?
您希望圆是圆形的,并且比父圆宽得多,但以相同或相似的长宽比隐藏上溢,并且可以使用单个元素来完成。
div {
width: 400px;
height: 300px;
background: blue;
position: relative;
overflow: hidden;
}
div:after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translateX(-50%);
background: red;
height: 300%; width: 400%;
border-radius: 50%;
}
<div></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句