如何用css创建一个椭圆矩形？

Question

我想用css创建一个椭圆矩形。我知道我可以边框圆角做，但我想要做这样的事情：

有没有办法用纯CSS做呢？

Answer 1

有没有，如果有人需要。

.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>