Can a vertical line be sketched next to a horizontal line?

Let's keep it short and sweet. Here's what I'm attempting to achieve:

https://i.sstatic.net/e2ZU2.png

Currently, this is what I have:

https://i.sstatic.net/cagv7.png

Below is the code snippet:

#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7d7e7f4f3a213f213f226d6a7b6e3e">[email protected]</a>/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>

I've been struggling with this for a few hours now...

Best regards,

htmlcssbootstrap-4

Answer №1

Adding a background effect:

#horizontal_line_experience {
  margin-left: 50px;
  width: 80px;
  height: 400px;
  border-left: solid 1px #707070;
  /* Creating 5 lines with 1px height */
  background:repeating-linear-gradient(transparent 0 calc(100%/5 - 1px),#707070 0 calc(100%/5));
}
<p class="h6">Professional</p>
<div id="horizontal_line_experience"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript

The class .is-invalid transforms into .is-valid when rendered

Currently, I am incorporating bootstrap into my react project. In this case, I have a variable called mobile that needs to undergo validation whenever there is a change in the input field. Below is the code snippet for the component: const EnterMobile = ( ...

javascriptreactjsbootstrap-4

Issue with syntax when transferring an HTML element from the #div to the body

Attempting to duplicate an element and remove the original because of a z-index issue in IE. Planning to use conditional comments: <!--[if lte IE 7]> <script type="text/javascript"> $(document).ready(function() { var callCenter ...

jqueryhtmlprepend

What is the best way to create a sticky div that reacts to a floating (position: fixed) div?

I have been utilizing Material UI's <Appbar /> component, which is rendered as a div with position: fixed;. The effect of the bar hiding on scroll employs visibility: hidden; and transform: translateY(-59px);. Now, my goal is to include a stick ...

javascriptcssreactjsmaterial-uigatsby

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not su ...

javascripthtmlcss

The outcome when submitting an HTML survey

I have a curiosity about what really happens when you click the submit button on an HTML survey like the one displayed below: <INPUT TYPE="radio" NAME="bev" VALUE="no" CHECKED>No beverage<BR> <INPUT TYPE="radio" NAME="bev" VALUE="tea">Te ...

pythonhtmlsurveysubmit-button

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

I have the following code snippet that allows me to display a pop-up either by clicking on the link or hovering over it. I am looking to modify it so that the pop-up opens when the page loads and restrict it to open only once per visitor per week. As some ...

javascripthtmlcssjquery

Eliminate the Material Stepper heading

Is there a way to remove the header navigation from the material stepper? I've tried using the following CSS code without success: .mat-horizontal-stepper-header-container{display: none} You can view the stepper on Stackblitz by clicking this link: ...

cssangularangular-materialangular-material2

Creating a customized navigation bar with a unique menu list underline feature using JavaScript

I recently created a customized navbar using a script to add a hover effect to the menu links. You can find the script I used here: https://github.com/shadeed/underliner. Although I was able to get it partially working, there are still some issues. The we ...

javascriptbootstrap-4navbar

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

htmlseleniumselenium-webdriver

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

htmlcssangulartypescriptscroll

Create a vertical scrollable feature for the <ul> element when it is set to flex, limiting its height within the specified dimensions

In order to enhance user experience, I have implemented a live search bar that is only visible on mobile screens. For the CSS styling: .search-results { z-index: 9999; width: 80vw; position: absolute; top: 80%; left: 10%; } .search-results li ...

htmlcssbootstrap-5

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

javascripthtmltypescripttypeselement

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

Arranging Nav Items in a Stack with Bootstrap 4

Struggling to create a unique navigation bar design with fixed elements on both the left and right sides. The challenge arises when scaling down to mobile, as the icons on the right end up stacking. Any suggestions on how to resolve this issue? <div ...

htmlcssreactjstwitter-bootstrap

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

Does Internet Explorer 10 support the FormData object?

I've developed a JavaScript app that enables me to upload images asynchronously, and it works seamlessly in most browsers. However, the infamous Internet Explorer is causing some trouble... To address this issue, I devised a workaround for IE9- versi ...

javascriptajaxhtmlinternet-explorerfile-upload

What is the best way to enlarge an element when scrolling downwards within the element?

I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is t ...

javascripthtmlcss