Search code examples
cssbackground-colorcss-shapesshapes

making a custom shape using css

I'm trying to use CSS3 to make this custom shape using css3.

shape
(source: mattieumoreau.com)

I would like to add text over it, and the red color is the background of my website (it will be a background image, so it has to be transparent.

thanks a lot for your help

Solution

  • You can use

    h1.elaborate{
    height:50px;
    line-height:50px;
    margin:0 50px;/*50 being the width of the arrows x2*/
    padding:0 25px;
    background:black;
    color:white;
    position:relative;
    box-sizing:border-box;
}
h1.elaborate:before,
h1.elaborate:after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:25px solid black;
    border-left-color:transparent;
    border-right-color:transparent;
}
h1.elaborate:before{left:-25px;}
h1.elaborate:after{right:-25px;}

    and use it as

    <h1 class="elaborate">I am the elaborate title</h1>

    Demo at http://dabblet.com/gist/9209450

    (and hover over the title at http://dabblet.com/gist/9209563 to see a sort of explanation of how it works)