我想创建一个带有css的椭圆形矩形。我知道我可以用边界半径做这件事,但我想做这样的事情:

有什么方法可以用纯css来做吗?
发布于 2017-04-25 09:21:28
如果有人需要的话。
.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>
https://stackoverflow.com/questions/43606170
复制相似问题