Center Arrows Vertically On Both Sides of Div with SVG - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

Center Arrows Vertically On Both Sides of Div with SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--from  w ww .  ja va 2s  .  c  om-->
   text-align: center;
}
#recout{
   text-align: left;
   text-align:center;
   margin: 0 auto;
   text-align: center;
   display: inline-flex;
   flex-direction: row;
}
.recleft,
.recright{
   display: inline-block;
   width: 50px;
   min-height: 550px;
   margin: 5px;
   vertical-align: center;
   position: relative;
}
.wrapper {
   position: absolute;
   top: 50%;
   width: 50px;
   height: 50px;
   flex: 0 0 50px;
}
.recin{
   background: #000000;
   display: inline-block;
   vertical-align:top;
   min-height: 550px;
   margin: 0;
   width: 500px;
   border-radius: 70px 70px 0 0;
   flex: 0 0 auto;
   height: 2000px;
}


      </style> 
 </head> 
 <body> 
  <div id="recout"> 
   <div class="recleft"> 
    <div class="wrapper"> 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> 
      <circle fill="#9FA1A4" cx="25" cy="25" r="25" /> 
      <g> 
       <g> 
        <path fill="#00FFFF" d="M31.2,8.4c1,0,2,0.4,2.8,1c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.2-1.4,2.9l-11.8,10l11.8,10
        c0.9,0.7,1.4,1.8,1.4,2.9s-0.5,2.1-1.4,2.9c-1.5,1.3-4,1.3-5.5,0L13.2,28.1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.1,1.4-2.9
        L28.4,9.4C29.2,8.8,30.2,8.4,31.2,8.4z" /> 
       </g> 
      </g> 
     </svg> 
    </div> 
   </div> 
   <div class="recin"></div> 
   <div class="recright"> 
    <div class="wrapper"> 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> 
      <circle fill="#9FA1A4" cx="25" cy="25" r="25" /> 
      <g> 
       <g> 
        <path fill="#FF00FF" d="M20,42c-1,0-2-0.4-2.8-1c-0.9-0.7-1.4-1.8-1.4-2.9c0-1.1,0.5-2.2,1.4-2.9l11.8-10l-11.8-10
        c-0.9-0.7-1.4-1.8-1.4-2.9s0.5-2.1,1.4-2.9c1.5-1.3,4-1.3,5.5,0L38,22.3c0.9,0.7,1.4,1.8,1.4,2.9c0,1.1-0.5,2.1-1.4,2.9L22.7,41
        C22,41.7,21,42,20,42z" /> 
       </g> 
      </g> 
     </svg> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials