TAG
CSS
Result
Run
License
<div class="mask-wrapper"><div class="mask"></div></div>
body { --gap: 30px; } .mask { border: 1px solid #CCC; width: 300px; height: 200px; border: var(--gap) solid transparent; padding: var(--gap); position: relative; background-image: url('http://resrc.devdic.com/img/bykind/bg/night_sky_494x314.jpg'); background-size: cover; -webkit-mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png") -100px -100px / cover fill-box; mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png") -100px -100px /cover fill-box; } .mask::after { content: "\2B05" "padding area"; position: absolute; left: calc(var(--gap) - 10px); top: 60px; color: red; z-index: 1; transform: rotate(-45deg); } .mask-wrapper { position: relative; display: inline-block; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("http://resrc.devdic.com/img/bykind/bg/night_sky_494x314.jpg") 0 0 / cover; } .mask-wrapper::before { content: "\2B05" "border area"; position: absolute; left: 0; top: 100px; color: red; z-index: 1; transform: rotate(-45deg); } .mask-wrapper::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: var(--gap) solid rgba(0, 0, 0, 0.5); }
Console
expand_less
License
License
by DevDic
Close