Is it possible to draw this picture on the canvas somehow, or to make it adaptive, so that if the width of the screen decreases, when the text comes around, the picture will increase in size.
1 answer
Simply use pseudo-elements:
* { 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> 
Arthur arthur
4.318 2 12 51
|