最佳答案
做了,如果有人需要的话。
.oval-rectangle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 150px;
height: 150px;
position: relative;
margin: 20px 0;
border: none;
-webkit-border-radius: 50% / 10%;
border-radius: 50% / 10%;
text-align: center;
text-indent: 0.1em;
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
}
.oval-rectangle::before {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
content: "";
top: 10%;
right: -5%;
bottom: 10%;
left: -5%;
border: none;
-webkit-border-radius: 5% / 50%;
border-radius: 5% / 50%;
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
text-shadow: none;
}
<div class="oval-rectangle"></div>
关于css - 如何用CSS创建一个椭圆形矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43606170/