Double Arrow and container with arrows on the side

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

Double Arrow and container with arrows on the side

A Pen by Adeola Adeoti on CodePen.

License.

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>

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;
}