Skip to content
Related Articles

Related Articles

How to set two bars with rounded arrows overlapping each other in CSS?
  • Difficulty Level : Medium
  • Last Updated : 22 Jan, 2021

In this article, we will discuss how to set two bars with rounded arrows overlapping each other using HTML and CSS.

Example 1: In the following HTML code we are using element <div> with an attribute class.  It is used to group other elements of the page using class attribute. CSS code is in <style> section of the HTML code where we are using lots of different attributes for the <div class=”container”> such as flex, display, align-items, justify-content, margins-right, position, background, etc for both the class “bar1” and “bar 2”.

HTML




<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 40%;
  height: 36px;
  display: flex;
  color: black;
}
.container .bar1 {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-right: 20px;
  position: relative;
  background: coral;
}
  
.container .bar1:after {
  content: "";
  position: absolute;
  right: -44px;
  height: 0;
  border-left: 45px solid black;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
.container .bar2 {
  flex: 1;
  display: flex;
  background: coral;
  position: relative;
  z-index: -1;
  justify-content: center;
  color: black;
}
.container .bar2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-left: 45px solid white;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
</style>
</head>
    <body>
    <div class="container">
        <div class="bar1">Bar 1</div>
        <div class="bar2">Bar 2</div>
     </div>        
    </body>
</html>

Output:

Example 2: The following HTML code will show you the exact output of overlapping bars with a rounded arrow. We have changed the margins of bars. You can see the complete overlapping of the arrow on Bar 2. Codes can be implemented in both ways as  shown in Example 1 and Example 2.



We use flex to set the flexible length of bars, z-index to control the order of elements that overlaps, content to insert space, position to draw up the positioning method and width, height, bottom, border-left, border-top, border-bottom for bordering, and margins. 

HTML




<!DOCTYPE html>
<html>
<head>
     
    <style>
        .rounded {
      width: 40%;
      height: 36px;
      display: flex;
      color: black;
    }
    .rounded .bar1 {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      background: yellow;
    }
  
    .rounded .bar1:after {
      content: "";
      position: absolute;
      right: -44px;
      height: 0;
      border-left: 45px solid black;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
    }
    .rounded .bar2 {
      flex: 1;
      display: flex;
      background: skyblue;
      position: relative;
      z-index: -1;
      justify-content: center;
      color: black;
    }
    .rounded .bar2:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      border-left: 45px solid white;
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
    }
    </style>
    </head>
    <body>
    <div class="rounded">
      <div class="bar1">Bar 1</div>
      <div class="bar2">Bar 2</div>
    </div>     
    </body>
</html>

Output:

  

My Personal Notes arrow_drop_up
Recommended Articles
Page :