CSS雙曲線形狀

Question

我已經看到從電視到雞蛋到簡單三角形的各種形狀。但是，如何將一個雙曲線形狀，填充在類似於這個核塔形狀？

Answer 1

如何使用border-radius與:before和:after僞元素呢？

Demo

這裏我使用的是包裝元素與class - .wrap，比我嵌套的子元素具有class - .object，現在我會分手的選擇解釋爲你，首先，我分配position: relative;父元素，使得absolute定位子元素沒有在野外飛了出去。二是我使用的元素與overflow: hidden;使得四捨五入pseudo elements隱藏這一點很重要..

，最後，我使用:before和:after僞元素和position他們使用absolute，並且我們必須分別使用top，left，，right屬性正確設置它。

<div class="wrap"> 
    <div class="object"></div> 
</div> 

.wrap { 
    position:relative; 
} 

.object { 
    margin: 100px; 
    position: relative; 
    overflow: hidden; 
    background: #fafafa; 
    width: 180px; 
    height: 215px; 
    border-top: 1px solid #aaa; 
    border-bottom: 1px solid #aaa; 
} 

.object:before, 
.object:after { 
    content: ""; 
    background: #fff; 
    position: absolute; 
    top: -53px; 
    width: 300px; 
    height: 320px; 
    border-radius: 300px; 
} 

.object:before { 
    left: -263px; 
    border-right: 1px solid #aaa; 
} 

.object:after { 
    right: -263px; 
    border-left: 1px solid #aaa; 
}