CODEWITHSUNDEEP
htmlcss
Alexey
Alexey

Reputation: 337

How to move box-shadow?

Hint

This is CSS how it's described

.hint {
 background: url('/triangle.png') center right no-repeat;
 padding-right: 10px;
 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}

How to move a shadow 10px left?

Upvotes: 0

Views: 6112

Answers (2)

Moob
Moob

Reputation: 16184

You can do it all with CSS (no need for an image):

.hint {
    background:#F85B58; 
    display:inline-block;
    position:relative;
    color:white;
    padding:20px;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}
.hint:before, .hint:after {
    content:" ";
    display:block;
    position:absolute;
    top:50%;
    left:100%;
    width:0px; 
    height:0px; 
    overflow:hidden;
    margin-top:-10px;
    border:10px solid transparent;
    border-left-color:#F85B58;
}
.hint:before {
    margin-top:-8px;
    border-left-color:rgba(0, 0, 0, 0.25);
}

See: http://jsfiddle.net/ro9nfhw6/

Change the border-width to make the arrow more acute (as per your example):

.hint:before, .hint:after {
    border-width:6px 10px;
}

eg: http://jsfiddle.net/ro9nfhw6/1/

Upvotes: 4

evilunix
evilunix

Reputation: 960

 .hint-outer {
    background: url('/triangle.png') center right no-repeat;
    padding-right: 10px;
 }

 .hint-inner {
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
    height: 100px;
 }


 <div class="hint-outer"><div class="hint-inner"></div></div>

Upvotes: 0

Related Questions