TAG
CSS
Result
Run
License
<div class="mask"></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 border-box; mask: url("http://resrc.devdic.com/img/bykind/alpha/150x135_flower.png") -100px -100px /cover border-box; } .mask::before { content: "\02B05" "border area"; position: absolute; left: calc(var(--gap) * -1); color: red; z-index: 1; transform: rotate(-45deg); } .mask::after { content: ""; position: absolute; left: calc(var(--gap) * -1); top: calc(var(--gap) * -1); right: calc(var(--gap) * -1); bottom: calc(var(--gap) * -1); border: var(--gap) solid rgba(0, 0, 0, 0.5); }
Console
expand_less
License
License
by DevDic
Close