投影

by 苹果熊

HTML

<div class="bg1"><img src="http://a4.topitme.com/l/201010/27/12881834411450.jpg" alt=""></div>
<div class="bg">啊啊啊啊</div>
<div class="bg2">角</div>

CSS

.bg {
  width: 100px;
  height: 100px;
  background: #390;
  margin: 100px auto;
  border-radius: 10px;
  filter: drop-shadow(2px -2px 0 #999);
  border: 1px solid #000;
  position: relative;
  color: #fff;
  padding: 10px;
}
.bg::before {
  content: '';
  position: absolute;
  left: 20px;
  top: -11px;
  width:20px;
  height: 20px;
  background: inherit;
  border: inherit;
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
  z-index: -1;
}
.bg1 {
  width: 400px;
}
.bg1 img {
  max-width: 100%;
  filter: sepia(1) saturate(2);
  transition: filter .2s;
}
img:hover {
  filter: none;
}
.bg2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 300px;
  background: linear-gradient(-45deg, transparent 15px, #f30 0)
}