TAG
CSS
Result
Run
License
<div class="mask-wrapper"> <div class="mask-img"> <img src="http://resrc.devdic.com/img/bykind/bg/night_sky_494x314.jpg" /> </div> </div>
.mask-wrapper { display: inline-block; position: relative; } .mask-wrapper::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 20px solid rgba(223, 230, 233, 0.5); } .mask-wrapper::after { content: "border area"; position: absolute; right: -60px; top: 50%; color: #FF0000; display: block; transform: rotate(-45deg); } .mask-img { border: 20px solid #000; -webkit-mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png") left top / contain; mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png") left top / contain; -webkit-mask-clip: content-box; mask-clip: content-box; }
Console
expand_less
License
License
by DevDic
Close