Flying memes

«
»

How to dog-ear a div hovering a pattern without adding extra tags

Today I come up with a way to dog-ear a div without adding extra tags. Basically we can take advantage to both :after and :before pseudo selectors to extend the div element and then use this technique to create the dog-ear with borders.

Everything works well also if the page has a background. Here’s the CSS code:

html{
    background: url('http://sandropaganotti.com/wp-content/goodies/misc/arab_tile.png');
}

div{ 
    background: white;
    position: relative;
    min-height: 100px;
    border-top: 2px solid gray;
    border-left: 2px  solid gray;
    border-bottom: 2px solid gray;
    margin-right: 30px;
    
    /* typography */
    padding: 10px 0 10px 10px;
    font-family: Verdana;
    font-size: 11px;
    line-height: 1.3;
    color: gray; 
    
    /* highly experimental */
     -webkit-filter: drop-shadow(3px 3px 7px rgba(0,0,0,0.3));
}

div:after{
    content: '';
    display: block;
    right: -30px;
    bottom: -2px;
    position: absolute;
    border-bottom: 30px solid transparent;
    border-left: 30px solid gray;
}

div:before{
    content: '';
    display: block;
    width: 30px;
    position: absolute;
    top: -2px;
    right: -30px;
    bottom: 28px;
    background: white;
    border-right: 2px  solid gray;
    border-top: 2px solid gray;
}

And here’s the demo: http://jsfiddle.net/kdFdt/8/

Tags: