What is the best way to create CSS that allows arrows to overlap each other seamlessly?

Is there a way to create two connected arrows in CSS, similar to the example shown in this JSFiddle?

.firstArrow {
  position: relative;
  background: rgb(0, 82, 48);
  text-align: center;
  margin-right: 20px;
  margin-left: 0px;
  height: 50px;
  float: left;
  width: 330px;
}
.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;

  background: linear-gradient(
    to right top,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;

  background: linear-gradient(
    to right bottom,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.secondArrow {
  position: relative;
  background: rgb(0, 82, 48);
  margin-right: 10px;
  float: left;
  height: 50px;
  width: 330px;
}
.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient(
    to right top,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(
    to right bottom,
    rgb(0, 82, 48) 50%,
    transparent 50%
  );
}
.container {
    width: 700px;
    margin: auto;
}
<div class="container">
  <div class="firstArrow"></div>
  <div class="secondArrow"></div>
</div>

How can I achieve a design where one arrow flows into the next one, like in this image?

css

Answer №1

Instead of a left value, consider using a negative value along with specifying the z-index for each arrow to create the desired effect.

Additionally, try changing the color of the second arrow to visualize how it overlaps with the first arrow. 

.firstArrow {
  position: relative;
  background: rgb(0, 82, 48);
  text-align: center;
  margin-right: 20px;
  margin-left: 0px;
  height: 50px;
  float: left;
  width: 330px;
  z-index: 5;
}

.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);
}

.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);
}

.secondArrow {
  position: relative;
  background: rgb(100, 82, 48);
  margin-right: 10px;
  float: left;
  height: 50px;
  width: 330px;
  left: -20px;
  z-index: 2;
}

.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, rgb(0, 82, 48) 50%, transparent 50%);
}

.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, rgb(0, 82, 48) 50%, transparent 50%);
}

.container {
  width: 700px;
  margin: auto;
}
<div class="container">
  <div class="firstArrow"></div>
  <div class="secondArrow"></div>
</div>

Answer №2

One possible approach is to utilize the following solution:

.arrow-container {
  margin: auto;
  width: 700px;
}
.arrow-container :not(:nth-child(1)) {
  margin-left: -25px;
}

.arrow {
  background: rgb(0, 82, 48);
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin-right: 20px;
  position: relative;
  text-align: center;
  width: 150px;
}
.arrow:after, .arrow:before {
  content: '';
  height: 50%;
  left: calc(100% - 1px);
  position: absolute;
  width: 20px;
  z-index: 9999;
}
.arrow:after {
  background: linear-gradient(to right bottom, rgb(0, 82, 48) 50%, transparent 50%);
  bottom: 0; 
}
.arrow:before {
  background: linear-gradient(to right top, rgb(0, 82, 48) 50%, transparent 50%);
  top: 0;
}

/** colorsets */
.arrow.active {
  background: rgb(0, 255, 0);  
}
.arrow.active:before {
  background: linear-gradient(to right top, rgb(0, 255, 0) 50%, transparent 50%);
}
.arrow.active:after {
  background: linear-gradient(to right bottom, rgb(0, 255, 0) 50%, transparent 50%);
}

.arrow.other {
  background: rgb(255, 255, 0);  
}
.arrow.other:before {
  background: linear-gradient(to right top, rgb(255, 255, 0) 50%, transparent 50%);
}
.arrow.other:after {
  background: linear-gradient(to right bottom, rgb(255, 255, 0) 50%, transparent 50%);
}
<div class="arrow-container">
  <div class="arrow active">A</div>
  <div class="arrow other">B</div>
  <div class="arrow">C</div>
</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

Personalized scroll bar within a Chrome application

I'm currently working on customizing the scrollbar for my Chrome App using CSS and I have encountered an issue with rule #2: section { overflow: auto } section::-webkit-scrollbar { width: 5px ; } Oddly enough, when I apply the second rule, Chrom ...

cssgoogle-chromescrollbargoogle-chrome-appblink

Adjusting the color of a value in justGage requires a few simple steps to

Is it possible to modify the color and design of the text in the Value parameter of justGage after creating the gauge? My goal is to change the text color to blue with an underline to give it a link-like appearance. Appreciate your assistance. ...

javascriptcsshtmlraphaeljustgage

Height of the image is being boosted while the width remains consistent

When working on a responsive page layout, I encountered an issue with increasing the height of an image while keeping the width constant. Modifying the width of the image reflects changes, but adjusting the height does not seem to make any difference. I t ...

htmlcss

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge

Shooting star css animation featuring pre and post effects

Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...

htmlcss

`Responsive Site with Centered Image Overlay`

I've been attempting to center a small image within a larger one, both of which are contained within a Bootstrap Column. <div className="row justify-content-center my-5 "> <div className="col-xs-10 col-sm-6 my-auto mx-auto" ...

htmlcsstwitter-bootstrapbootstrap-4

Adjusting the color of a specific part of a text within a string using

I am trying to update the color of specific keywords within a post. For example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od #keyword1 #keyword2 #keyword3 ...

javascripthtmlcssreactjsnext.js

Scrolling to zoom in on the div content

I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows: var zoomable = document.getElementById('zoomable'), zX = 1; window.addEvent ...

javascriptjqueryhtmlcssresize

Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...

csshtmlsvg

Is it possible to apply the box-shadow effect only to the left and right sides of a div?

Looking to achieve a box shadow effect on just the left and right sides of a div? box-shadow: 0px 0 20px rgba(0,0,0,.4); I experimented with variations like: box-shadow: 0, foo, 0, foo; but it did not yield the desired results. In the illustration bel ...

htmlcss

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): https://i.sstatic.net/pJFOi.png Examining my existing fronten ...

javascripthtmlcssreactjsflexbox

Why does the sticky navbar not display anything on localhost:4200 in Angular, but works perfectly when placed in a regular HTML file?

I'm encountering an issue while trying to create a webpage in Angular 6. The content displays correctly when I write the code in NOTEPAD as normal HTML, but it doesn't work as expected when implemented in Angular. I am new to Angular and struggli ...

htmlcssangularbootstrap-4navbar

New space is formed as the input box gains focus on the signin field

I'm currently working on a sign-in page and implementing JQuery. Everything seems to be functioning properly except for a minor issue. The problem is that when the password field gains focus, it creates extra space in IE 8 and later versions only. Th ...

javascriptjqueryhtmlcssinternet-explorer-8

Is there a way to showcase the outcome of a Python script on an HTML webpage?

Hey there, I'm a beginner to coding and I've been working on a little project to track the price of gold in a web application using Flask and Python. In my HTML code, I have a button that, when clicked, takes users to a new route where the gold ...

pythoncssflask

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

css

Activate the Twitter Bootstrap Lightbox when the page is loaded

Is there a way to make my twitter bootstrap lightbox automatically trigger when the HTML page loads? Currently, I have this script in my 'main.js' file: function lightbox(){ $('#myLightbox').lightbox(); }; I heard that I can us ...

htmlcsszend-frameworktwitter-bootstraplightbox

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Apologies for the confusing title, but I must confess that I am unsure if there are more appropriate terms to explain what I am attempting to achieve. To provide clarity, I have included an image (as they say, a picture is worth a thousand words) https:// ...

csssassbourbon

Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . @charset "utf-8"; /* Custom CSS Styles * ...

htmlcss

When the width is set to 100vh, there is excessive white space beneath the div

I'm dealing with a unique situation where I have a horizontal scrollable div containing different elements. To achieve the horizontal scroll, I've set the width: 100vh and rotated the div. However, this is causing an unwanted white space below th ...

htmlcss