'how to make a arrow line for divs using css?

I have parent and child div tag. I want to point arrow to child div tag from parent div tag.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 #curves div {
   width: 100px;
   height: 100px;
   border: 5px solid #999;
 }
 #curves.width div {
   border-color: transparent transparent transparent #999;
 }
 #curve1 {
   -moz-border-radius: 50px 0 0 50px;
   border-radius: 50px 0 0 50px;
 }
 .arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 27px solid #ccc;
   float: right;
   margin-top: -7px;
   margin-right: -26px;
 }
</style>
</head>
<body>
<div id="curves" class="width"> parent 
  <div id="curve1"> child  </div><span class="arrow-right">  </span>
</div>

</body>
</html>

No javascript, Learning to use arrow in css I want to make like this image enter image description here

htmlcss


Solution 1:[1]

Here is an arrow with pure CSS. Supported by all browsers.

.arrow {
  width: 120px;
}

.line {
  margin-top: 14px;
  width: 90px;
  background: blue;
  height: 10px;
  float: left;
}

.point {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
  float: right;
}

<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

Arrow

Solution 2:[2]

As already mentioned, you can do it with pseudo-elements. Here's a way to do it:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .parent {
                display: inline-flex;
                flex-direction: column;
                width: 100%;
                margin-bottom: 10px;

            }

            .children {
                position: relative;

            }

            .children {
                margin-left: 12px;
            }

            .parent .children:not(:last-of-type):before {
                content: "";
                width: 1px;
                height: 100%;
                background-color: #666;
                top: 0;
                left: -10px;
                position: absolute;
            }

            .parent .children:last-of-type:before {
                content: "";
                width: 6px;
                height: 10px;
                border-left: 1px solid #666;
                border-bottom: 1px solid #666;
                border-radius: 0 0 0 6px;
                top: 0;
                left: -10px;
                position: absolute;
                font-size: 10px;
                line-height: 19px;
            }

            .parent .children:last-of-type:after {
                content: "";
                width: 4px;
                height: 0px;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 5px solid #666;
                top: 5px;
                left: -6px;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            Parent
            <div class="children">child</div>
            <div class="children">child</div>
        </div>
        <div class="parent">
            Parent
            <div class="children">child</div>
        </div>
    </body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Areg Nikoghosyan
Solution 2

Related Questions