Как сделать картинку адаптивно \ canvas

186
06 августа 2018, 08:20

Можно ли эту картинку нарисовать на канвасе как-нибудь, либо сделать адаптивной, что бы при уменьшении ширины экрана, когда съезжается текст, картинка увеличивалась в величине.

Answer 1

Достаточно просто использовать псевдоэлементы:

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  margin: 16px; 
  padding-left: 16px; 
  font-size: 19px; 
  border-left: 8px solid; 
} 
 
ul { 
  padding: 1rem; 
  list-style-type: none; 
} 
 
ul li { 
  position: relative; 
} 
 
ul li::before { 
  content: '—'; 
  position: absolute; 
  left: -21px; 
} 
 
h2 { 
  font-family: Arial; 
  position: relative; 
} 
 
h2::before { 
  content: ''; 
  position: absolute; 
  left: -35px; 
  width: 20px; 
  height: 20px; 
  background-color: white; 
  border-radius: 50%; 
  border: 5px solid; 
}
<div class="wrapper"> 
  <div class="block"> 
    <h2>Title</h2> 
    <ul> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
    </ul> 
  </div> 
  <div class="block"> 
    <h2>Title</h2> 
    <ul> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
    </ul> 
  </div> 
  <div class="block"> 
    <h2>Title</h2> 
    <ul> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
    </ul> 
  </div> 
  <div class="block"> 
    <h2>Title</h2> 
    <ul> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ab error quis asperiores temporibus minus est sit doloribus cupiditate laudantium voluptatibus, tempora voluptatum nostrum suscipit ratione tenetur sapiente numquam quidem.</li> 
    </ul> 
  </div> 
</div>

READ ALSO
привязать modal к клавишам

привязать modal к клавишам

ЗдрасьтеВообщем меня интересует возможность привязки модального окна к клавишам виртуальной клавиатуры, не вставляя кусок самого кода...

134
Сравнить данные из input и data-attr

Сравнить данные из input и data-attr

Есть данные которые мы передаем в атрибут, в таком виде data-date=" 2806

184
Работа с набором JQuery

Работа с набором JQuery

Написал скроллерХочу к кликнутому пункту сделать допвыборку элемента и применить к нему стили

209
Click срабатывает только один раз

Click срабатывает только один раз

Клик срабатывает только один раз, уже выносил за $(document)ready(function() {, писал с $('#btn')

217