Есть ли возможность провести вертикальную линию справа от горизонтальной?

Я скажу коротко и просто. Я пытаюсь сделать следующее:

Прямо сейчас у меня есть это:

Вот код:

#ligne_horizontale_experience {
    margin-left: 50px;
    width:170px; 
    height:400px;
    border: solid 1px #707070;
    border-color: transparent transparent transparent #707070;
}

#ligne_verticale_experience_1 {
    margin-left: 50px;
    width:45px; 
    height: 0px;
    border: solid 1px #707070;
    border-color: transparent transparent #707070 transparent;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta name  = "author" content = "me">
    <link rel = "shortcut icon" href = "favicon.ico" type = "">
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
    <link rel = "stylesheet" href = "code.css">
    <title>me</title>
</head>
<body>
    <div class = "container">
        <div class = "row">
            <div class = "col-2">
                <p class = "h6">Professionnel</p>
                <div id = "ligne_horizontale_experience"></div>
                <div id = "ligne_verticale_experience_1"></div>
            </div>
        </div>
    </div>
</body>
</html>

Я изо всех сил пытаюсь сделать это с пары часов.

С уважением,

html css bootstrap-4

26.12.2020 13:23

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

118

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сделайте это с фоном:

#ligne_horizontale_experience {
  margin-left: 50px;
  width: 80px;
  height: 400px;
  border-left: solid 1px #707070;
  /* 5 lines with 1px height */
  background:repeating-linear-gradient(transparent 0 calc(100%/5 - 1px),#707070 0 calc(100%/5));
}

<p class = "h6">Professionnel</p>
<div id = "ligne_horizontale_experience"></div>

Работает отлично. Спасибо. У меня есть еще один вопрос по этому поводу. Если я хочу добавить изображение с текстом справа от каждой вертикальной линии, как я могу сделать это с помощью вашего решения?

— 26.12.2020 13:43

@Balaure Мне, вероятно, понадобится другой код, вы не добавили такое требование к вопросу, поэтому я его не рассматривал

— 26.12.2020 15:12

26.12.2020 13:36