#svg #bootstrap-4
Вопрос:
Я пытаюсь расположить svg в верхней левой и правой части моей страницы, но, похоже, это не работает в части svg
<div class="position-relative"> <div class="position-absolute top-0 start-0 translate-middle-y"> <svg width="181" height="176" viewBox="0 0 181 176" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M-5 5.00001C-5 -6.04569 3.95431 -15 15 -15C26.0457 -15 35 -6.0457 35 5V156C35 167.046 26.0457 176 15 176C3.95431 176 -5 167.046 -5 156V5.00001Z" fill="#F23DFF"/> <path d="M10 30C-1.04569 30 -10 21.0457 -10 10C-10 -1.04569 -1.0457 -10 10 -10L161 -10C172.046 -10 181 -1.04569 181 10C181 21.0457 172.046 30 161 30L10 30Z" fill="#F23DFF"/> </svg> </div> </div> весь код
<section class="bg-dark d-flex align-items-center flex-1 justify-content-center text-light p-5 p-lg-0 text-center text-md-start"> <div class="container"> <div class="position-absolute top-50 start-50 translate-middle"> <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1> </div> <div class="align-items-center text-center position-relative position-absolute top-50 start-0 translate-middle-y"> <h3 class="languages">About</h3> </div> <div class="align-items-center text-center position-relative position-absolute top-50 end-0 translate-middle-y"> <h3 class="languages">Langs</h3> </div> <div class="position-relative"> <div class="position-absolute top-0 start-0 translate-middle-y"> <svg width="181" height="176" viewBox="0 0 181 176" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M-5 5.00001C-5 -6.04569 3.95431 -15 15 -15C26.0457 -15 35 -6.0457 35 5V156C35 167.046 26.0457 176 15 176C3.95431 176 -5 167.046 -5 156V5.00001Z" fill="#F23DFF"/> <path d="M10 30C-1.04569 30 -10 21.0457 -10 10C-10 -1.04569 -1.0457 -10 10 -10L161 -10C172.046 -10 181 -1.04569 181 10C181 21.0457 172.046 30 161 30L10 30Z" fill="#F23DFF"/> </svg> </div> </div> </div> </section> вот как это выглядит прямо сейчас 