CODEWITHSUNDEEP
css
Ryan
Ryan

Reputation: 24083

How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

I want my box to look like this except for the left side to be blank:

.box{
    width: 190px;
    height: 90px;
    display: inline-block;
    padding: 5px;
    margin: 50px;
}

#box4sides{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 1px 1px #dbdbdb;
    -webkit-box-shadow: 0 0 1px 1px #DBDBDB;
    box-shadow: 0 0 1px 1px #DBDBDB;
    background: white;
    border: 1px solid #CDCDCC;
}

Here is my best attempt: http://jsfiddle.net/7dpUA/2/

I found other examples of 3-sided boxes, but they were with either the top or bottom removed, and I haven't been able to translate that to my case.

Upvotes: 0

Views: 1179

Answers (3)

BlackCursor
BlackCursor

Reputation: 1492

Create a wrapper div around the box with overflow as hidden and give a negative margin for the #box4sides div.

Check this jsFiddle : http://jsfiddle.net/7dpUA/22/

Is this what you need?

Upvotes: 0

Aust
Aust

Reputation: 11622

My recommendation is to remove the class shadow from your 3 sided box and add this bit of css on your 3-sided box.

box-shadow: 1px 1px 1px 0 #DBDBDB, 1px -1px 1px 0 #DBDBDB;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

Explanation of the box-shadow property:
box-shadow: 1 2 3 4 color;

  1. Horizontal Offset - Positive values move the shadow right, negatives left.
  2. Vertical Offset - Positive values move the shadow down, negatives up.
  3. Blur Radius - The larger the value, the blurrier it is.
  4. Spread Distance - Positive values expand the shadow, negatives contract.

Color is pretty self-explanatory. Here is your jsFiddle edited to show what you want.

As far as the shadow is concerned, you don't need position: relative; anymore either.

Upvotes: 2

Forty-Two
Forty-Two

Reputation: 7605

Is this what you're looking for? I exaggerated the borders and such for emphasis and increased the first argument on the shadow element to throw it to the right a bit, avoiding a "false border" effect.

Upvotes: 0

Related Questions