Home/ Questions/Q 8467515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T15:40:08+00:00

I’m trying to do something like this: The boxes have shadows and the background

  • 0

I’m trying to do something like this:

enter image description here

The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).

After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:

enter image description here

I’m trying to use box-shadows and only a small image for the corner, instead of a large complete background.

How I can do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use both the pseudo-elements, one for the upper box, the other for the white triangle:

    h1 {
    background: #F0B032;
    box-shadow: 1px 1px 4px #362708;
    line-height: 30px;
    position: relative;
}
h1:before, h1:after {
    content: '';
    position: absolute;
    left: 100%;
}
​h1:before {
    background: #F0B032;
    box-shadow: 1px 1px 2px #362708;
    width: 15px;
    height: 16px;
    top: 0;
}
h1:after {
    border: 7px solid transparent;
    border-left-color: #fff;
    border-top-color: #fff;
    bottom: 0;
}

    ​Here’s the fiddle: http://jsfiddle.net/Kjp6v/

    This does not add a shadow under the fold, but looks realistic enough.

    • 0