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 class="dummy"></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: -50px; top: 50%; color: #FF0000; display: block; transform: rotate(-45deg); } .mask-img { border: 20px solid #000; padding: 20px; -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: paddng-box; mask-clip: padding-box; -webkit-mask-origin: content-box; mask-origin: content-box; position: relatvie; } .dummy::before { content: "content area"; position: absolute; left: 40px; top: 20%; z-index: 10; color: #FF0000; display: block; transform: rotate(-45deg); } .dummy::after { content: ""; position: absolute; left: 40px; top: 40px; right: 40px; bottom: 40px; border: 1px dotted #FF0000; z-index: 10; }
Console
expand_less
License
License
by DevDic
Close