Как переместить коробку-тень?

Question

Это CSS, как это описано

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

Как переместить тень 10px влево?

Answer 1

Вы можете сделать все это с помощью CSS (нет необходимости для изображения):

.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); 
} 

См: http://jsfiddle.net/ro9nfhw6/

Изменение border-width, чтобы стрелка более острым (в соответствии с вашим примером):

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

например: http://jsfiddle.net/ro9nfhw6/1/

Answer 2

.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>