Well, this is not my answer. I'm just adding code snippet of solution given by @Sachin in comment section of question. h1 { position: relative; font-size: 30px; z-index: 1; overflow: hidden; text-align: center; } h1:before, h1:after { position: absolute; top: 51%; overflow: hidden; width: 50%; height: 1px; content: '\a0'; background-color:...
Codepen link Is that what you mean? HTML <div> <span> </span> </div> CSS div { border: 1px solid black; width: 200px; height: 200px; } span { box-sizing: border-box; display: block; width: 200px; height: 200px; border-width: 50px; border-image: url(https://www.castlejackpot.com/wp-content/uploads/dynamik-gen/theme/images/home-horizontal-border.png) 50 repeat; } ...
jquery,image,css3,offset,border-image
You need a wrapper to use $(img).after because border elements get size of the parent (and insert the corners to just that element). You can use this code and some css: $('img').wrap('<div class="IMGwrapper"></div>') $('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/0yCz3oA.png" class="TL" />'); $('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/pjYWHyM.png" class="BR" />'); $('.IMGwrapper img').eq(0).after('<img src="http://i.imgur.com/UcOam5I.png" class="BL" />'); $('.IMGwrapper...