Skip to content

Instantly share code, notes, and snippets.

@lobebe

lobebe/double-arrow-and-container-with-arrows-on-the-side.markdown

Created March 22, 2022 13:43
Show Gist options
  • Save lobebe/94f445efb93b9afc3226091d3925d0dc to your computer and use it in GitHub Desktop.
Save lobebe/94f445efb93b9afc3226091d3925d0dc to your computer and use it in GitHub Desktop.
Download ZIP
Double Arrow and container with arrows on the side
Raw
double-arrow-and-container-with-arrows-on-the-side.markdown
Raw
index.html
<div id="arrowAnim">
<div class="arrowSliding">
<div class="arrow"></div>
<div class="arrow1"></div>
</div>
</div>
<br>
<div class="new-arrows"> I love CSS</div>
Raw
style.css
#arrowAnim {
width: 50vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 5vw;
height: 5vw;
border: 2.5vw solid;
border-color: black transparent transparent black;
transform: rotate(-225deg);
}
.arrow1 {
width: 5vw;
height: 5vw;
border: 2.5vw solid;
border-color: blue transparent transparent blue;
transform: rotate(-225deg);
}
.arrowSliding {
display: flex;
position:relative;
}
.new-arrows {
width: 200px;
height: 50px;
background: yellow;
position: relative;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
.new-arrows:before {
content: '\A';
position: absolute;
right: -25px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 40px solid yellow;
z-index: 10;
}
.new-arrows:after {
content: '\A';
position: absolute;
right: -40px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 40px solid blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment