Please skip the code for an example of such a block, then I'll figure it out myself later)
2 answers
The easiest
<img src="фон с хвостиком.png" style="background-image:photo.jpg" /> In the фон с хвостиком.png curly transparency :-)
chernomyrdin chernomyrdin
3,991 9 15
|
The simplest thing is to use SVG, in my case I took the svg: inkscape editor and opened your image, scanned it with the usual tool for creating the path and copied it to a new picture and made a clip-path - saved and cleaned off unnecessary tags - see the result:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 638.571 817.139"> <defs> <clipPath id="a"> <path d="M680.526 821.262l-187.143-1.429-296.429 2.143c-24.424 1.918-32.33-7.176-40-16.428l-2.143-38.572 1.429-750c.805-8.095 1.354-16.19 11.428-24.285l530.715-.715c10.22 2.234 17.954 10.86 20.721 18.658.95 47.352.385 98.005 1.335 142.814-1.037 172.634-1.856 344.061.252 514.365l2.692 7.735c23.333 16.97 46.666 29.21 70 38.571l-34.286 16.429-40 5-3.571 67.857c-16.074 18.023-24.513 18.455-35 17.857z" fill="none" stroke="#000"/></clipPath> </defs> <image transform="matrix(.9312 0 0 .96057 -98.37 8.902)" clip-path="url(#a)" y="2.929" x="-287.024" xlink:href="http://www.setwalls.ru/download.php?file=201304/1920x1080/setwalls.ru-4866.jpg" preserveAspectRatio="none" height="817.139" width="1228.8" image-rendering="optimizeQuality"/> </svg> just in case, if suddenly the code in the snippet will not work I put the SVG on a special service: https://jsfiddle.net/fte217j0/3/
for clarity, a screenshot
|