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"); mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center top; mask-position: center top; }
Console
expand_less
License
License
by DevDic
Close