How to move box-shadow using CSS?

The problem is though, that you need to split your markup into multiple divs, and apply shadows to them seperately. Box shadows will always apply to the entire div, even if parts of it appear to be transparent to you.

You would need two elements each with their own box-shadow and the triangle ‘element’ would need to be transformed.

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