How to pinch the middle of a line in css


Tags: html,css,css3,css-shapes

Problem :

I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge.

Any help would be appreciated.

Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex.

Here's the code of what I've done so far

    .line {
        background:none;
        height: 8px;
        position:relative;
        overflow:hidden;
        z-index:1;
        top: 50px;
        left: 50px;
        width: 140px;
        box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6);
        -webkit-transform: rotate(38deg);
        transform: rotate(38deg);
    }
    .line:after {
        content: '';
        position: absolute;
        left: 0%;
        width: 100%;
        padding-bottom: 10%;
        top: 50%;
        border-radius: 35%;
        box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6);
        z-index: -1;
    }
    .line:before {
        content: '';
        position: absolute;
        left: 0%;
        width: 100%;
        padding-bottom: 8%;
        top: -30%;
        border-radius: 35%;
        box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1);
        z-index: 24 !important;
    }

and the HTML

<section class="stage">
    <figure class="line"></figure>
</section>

Here's the fiddle of what I have thus far (also, I'm gonna need to rotate it for certain areas)

http://jsfiddle.net/speo9bfv/1/

Thanks for the help!



Solution :

If you have a plain background color, you can do this with pseudo elements :

DEMO

HTML :

<section class="stage">
    <figure class="line"></figure>
</section>

CSS :

.line {
    height: 8px;
    position:relative;
    overflow:hidden;
    z-index:1;
    top: 50px;
    left: 50px;
    width: 140px;
    -webkit-transform: rotate(38deg);
    transform: rotate(38deg);
    background:rgba(0,0,0,0.6);
}
.line:after, .line:before {
    content:'';
    position: absolute;
    left:0;
    width:100%;
    height:100%;
    border-radius: 35%;
    background:#fff;
}
.line:after{
    top:5px;
}
.line:before{
    bottom:5px;
}

    CSS Howto..

    How to set two divs side-by-side with the same height?

    How to refer to an anchor pane in css?

    How to apply css to iframe content? [closed]

    SCSS/SASS how apply style for all pseudo selectors

    How to get use the functionality same as “-webkit-appearance” in firefox?

    CSS dropdown menu not showing the full texts of submenu items

    PHP: How to style session output [closed]

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    How to change horizontal block-level elements to vertical elements after specific width?

    div content shows when display:none

    How to create a simple social sharing dropdown menu in CSS/HTML

    show content block on right above the content on right when displaying on mobile

    How to make both text and image change on rollover via CSS?

    how to create a table layout with float in css

    How to hide last divider in list of comments using CSS?

    How to import the css file by media queries by condition [duplicate]

    How to translate html, css and js into one javascript (animation)

    How to create a list with 'pinned' items

    Show window inside any web page

    Can't show updated image

    How to make edgy corners with css

    How to get :before selector behind its box?

    How to make hero slider go always in the same direction

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

    How to achieve MS word tab function in html/ css?

    css - jquery - how to remove wrapper div element?

    How to stop jquery from overriding CSS color?

    how to make an odd shaped html/css menu?

    How Is This Effect Achieved? HTML/CSS/jQuery [closed]

    How do I load a nested web page in a
    tag using only javascript and html?