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; 
}