Не получается установить элементы, как на скриншоте

341

25 июля 2021, 10:00

Коллеги, подскажите, пожалуйста. Не получается сверстать L так, как на скрине. Нужно сделать с помощью flex Буква состоит из 2 svg изображений. И объясните, пожалуйста, как организовать данную задачу.

Answer 1

Вот пример вёрстки с использованием данных фигур в виде SVG-изображения.

Скачайте по ссылке и пользуйтесь на здоровье.

Можно масштабировать как Вам будет угодно.

P.S. Результат смотрите на CodePen. При выполнении кода здесь на сайте почему-то картинку не подгружает.

https://codepen.io/hisbvdis/pen/bGbKZpP

div { 
  width: 500px; 
  height: 500px; 
  background: url("http://hisbvdis-pic.zzz.com.ua/drafts/zl.svg") center no-repeat, #519FCA; 
}

<div></div>

Answer 2

Как будет на svg буква L Чтобы менять цвет заливки фигуры используется атрибут fill сейчас fill='black'

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg  version="1.1" width="1280" height="1024" 
        viewBox="0 0 1280 1024" 
     baseProfile="full" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:ev="http://www.w3.org/2001/xml-events"> 
            
 <g > 
  <rect width='50' height='200' fill='black'  x='300' y='150'  /> 
   <polygon points='300,370 300,400 450,400 420,370'/> 
 </g> 
 
 </svg>