background-image arrow

by imys

HTML

<body>
<div class="main">
</div>
</body>

CSS

.main {
  position: relative;
  width: 412px;
  height: 261px;
  background:url('http://pic.baike.soso.com/p/20130828/20130828162541-2121279471.jpg') no-repeat;
  border-radius: 10px;
}
.main:after {
    position: absolute;
    top: 261px;
    left: 20px;
    width: 20px;
    height: 20px;
    content: '';
    box-sizing: border-box;
    border-top: 20px solid transparent;
    border-left: 20px solid #f3f5f6;
    border-right: 20px solid #f3f5f6;
    background: inherit;
    background-position: -20px bottom;
    background-origin: border-box;
  }