Как сделать блок этой формы?

245

19 ноября 2018, 12:40

Скиньте пожалуйста код примера подобного блока, дальше сам додумаю уже )

Answer 1

Самое простое

<img src="фон с хвостиком.png" style="background-image:photo.jpg" />

В фон с хвостиком.png фигурная прозрачность :-)

Answer 2

Самое простое это воспользоваться SVG, в моём случае я взял редактор svg: inkscape и открыл ваше изображение, обвёл обычным инструментом по созданию path и скопировал на новую картинку и сделал clip-path - сохранил и почистил от лишних тегов - смотрите результат:

<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>