Question

We’re trying to create an HTML page that consists of masonry-style floated elements that contain a picture and title. The elements have a shadow and the page has a slight gradient background. Targets that have already been visited have a folded corner.

The folded corner causes a couple of problems:

1) How can we make the element’s box-shadow end before the folded corner on the right and bottom sides? Will we have to do the shadows the pre-CSS3 way with divs containing semi-transparent gradients?

2) How to do the folded corner itself? We can’t just impose an image on the right bottom corner on top of the white background, because the page’s background gradient must show through.

Answer 1

So far, I’ve thought of four ways of doing this:

Method 1: The idea behind this one is to use two pseudo-elements on the .box to get the corner and then two pseudo-elements on the .box-text to get the shadows in the corners right – demo. The biggest problem with this one is that it is… well, ugly.

HTML structure:

<div class="box">
    <header></header>
    <div class="box-text">
        <p>Text</p>
    </div>
</div>

Relevant CSS:

body {
    background: #ccc;
}
.box {
    box-shadow: 2px 2px 13px #000;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
    position: absolute;
    content: '';
}
.box:before {
    bottom: -25px;
    right: -25px;
    width: 75px;
    height: 75px;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    box-shadow: -2px -2px 2px #777;
    background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
    bottom: 32px;
    right: -15px;
    width: 15px;
    height: 18px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
    bottom: -15px;
    right: 32px;
    width: 18px;
    height: 15px;
    background: radial-gradient(top left, #333 0%, transparent 40%);
}

---

Method 2: combine shadows in a nicer manner using a skewed pseudo-element for that particular corner (I would have shadows on the pseudo-element) – demo

I think this one looks nicer and also has the advantage of working in IE9 as well (the previous one didn’t, since it made use of CSS gradients).

The HTML would be exactly the same and the CSS would become:

.box {
    box-shadow: 0 0 5px 1px #777;
    position: relative;
    background: white;
}
.box:before, .box:after, .box-text:before {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    bottom: -38px;
    right: -38px;
    width: 71px;
    height: 71px;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    right: 0;
    bottom: 22px;
    width: 47px;
    box-shadow: 2px 2px 3px 1px #777;
    transform: skewY(-45deg);
}

---

Method 3: I got an idea from the previous method – demo. I think the previous one looks slightly nicer though…

CSS that has changed:

.box:before {
    bottom: -24px;
    right: -7px;
    width: 35px;
    height: 70px;
    box-shadow: inset 2px 0 3px 1px #999;
    transform: rotate(45deg);
    z-index: 1;
    background: #ccc;
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}
.box-text:before {
    bottom: -27px;
    right: -10px;
    width: 35px;
    height: 70px;
    transform: rotate(45deg);
    background: #ccc;
}

Method 4: Uses just 2 pseudo-elements, both on the box – demo

.box:before, .box:after {
    position: absolute;
    z-index: 2;
    content: '';
}
.box:before {
    right: -8px;
    bottom: 22px;
    width: 65px;
    box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
    transform: rotate(-45deg);
}
.box:after {
    bottom: 0;
    right: 0;
    border: solid 23px #f9f0f0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    box-shadow: -1px -1px 2px #777;
    z-index: 4;
}