CSS Hyperbola Shape

Question

I've seen all kinds of shapes from tvs to eggs to simple triangles. But how would one make a hyperbolic shape, filled in similar to this nuclear tower shape?

Answer 1

How about using a border-radius with :before and :after pseudo elements?

Demo

Here am using a wrapper element with a class - .wrap and than am nesting a child element with a class - .object, now I will break up the selectors explanation for you, first, am assigning position: relative; for the parent element so that the absolute positioned child elements don't fly out in the wild.. second is I am using an element with overflow: hidden; which is important so that the rounded pseudo elements are hidden..

And at last, I use :before and :after pseudo elements and position them using absolute, and than we have to set it correctly using top, left, right properties respectively.

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