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?
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;
}
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.