0

Вот так можно сохранить в векторном виде

введите сюда описание изображения

Нужно сверстать как на этом макете

введите сюда описание изображения

Как можно такое сверстать с картинкой в шестиугольнике и с текстом?

2
  • А что у Вас не получается? Commented 18 февр. 2020 в 11:56
  • Картинка в многоугольнике
    – Denis
    Commented 18 февр. 2020 в 12:02

1 ответ 1

1

Собственно не сложно это

<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<defs>
    <pattern id="ptn" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620.jpg" 
             x="0" y="0" width="100%" height="100%"/>
    </pattern>
 </defs>
<path  transform="translate(34,0)" d="M0,400 40,340 110,340 150,400 110,460 40,460 "  fill="url(#ptn)"/>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
<text x="220" y="370" font-size="40" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="18px">
  <tspan x="220" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
  <tspan x="220" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
  <tspan x="220" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
  <tspan x="220" y="455">quibusdam minus. Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan> 
</text>
</svg>

А это по макету

<svg viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg">
<defs>
    <pattern id="ptn" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="https://edem-v-gosti.ru/upload/iblock/e58/92198620.jpg" 
             x="0" y="0" width="100%" height="100%"/>
    </pattern>
 </defs>
<path d="M20,400 70,330 920,330 990,400 920,470 70,470z" fill="none" stroke="#000" stroke-width="2"/>
  
<path  transform="translate(0,-200)scale(1.5)" d="M0,400 40,340 110,340 150,400 110,460 40,460 "  fill="url(#ptn)"/>

<text x="260" y="370" font-size="30" text-transform="uppercase">Продукция высокого качества</text>
<text font-size="14px">
  <tspan x="260" y="395">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit explicabo dolor inventore</tspan>
  <tspan x="260" y="415">perferendis minima cumque reprehenderit iste laborum culpa praesentium suscipit asperiores</tspan>
  <tspan x="260" y="435">necessitatibus aperiam at unde itaque, saepe temporibus quam, accusamus laudantium?</tspan>
  <tspan x="260" y="455">quibusdam minus. Aspernatur, ad nulla iure eveniet ducimus voluptatibus sed</tspan> 
</text>
</svg>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.