双箭头 CSS

Question

我想在圆圈中创建一个双箭头，但我只能创建一个。我以前尝试过使用但无能为力。这是代码：

<div id="basso">
    <a href="#" id="freccia">
        <span id="bottom"></span>
    </a>
</div>

Fiddle: fiddle

Answer 1

我刚刚使用了 :before 并复制了您在 :after 上使用的 CSS，仅更改了 margin-top 和位置。

    #basso
 {
   text-align: center;
   display: inline-block;
   vertical-align: middle;
 }


 #bottom
 {
   display: inline-block;
   border-radius: 50%; 
 }

 #freccia:hover #bottom
 {
   display: inline-block;
   border-radius: 50%;
   border: 0.15em solid #4183D7;
 }

 #freccia:hover #bottom:after
 {
   border-top: 0.15em solid #4183D7;
   border-right: 0.15em solid #4183D7;
 }



 #bottom 
 {
   display: inline-block;
   width: 3em;
   height: 3em;
   border: 0.15em solid #333;
   border-radius: 50%;
   margin-left: 0.75em;
   transition: all 0.1s ease-out;
   
   
 }

 #bottom:after 
 {
   content: '';
   display: inline-block;
   margin-top: 0.6em;
   width: 1.2em;
   height: 1.2em;
   border-top: 0.15em solid #333;
   border-right: 0.15em solid #333;
   -moz-transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
   transition: all 0.1s ease-out;
 }
  #bottom:before 
 {
  position: absolute;
   content: '';
   display: inline-block;
   margin-top: 0.3em;
   width: 1.2em;
   height: 1.2em;
   border-top: 0.15em solid #333;
   border-right: 0.15em solid #333;
   -moz-transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
   transition: all 0.1s ease-out;
 }


 #bottom:hover:after
 {
   content: '';
   display: inline-block;
   margin-top: 0.9em;
   width: 1.2em;
   height: 1.2em;
   border-top: 0.15em solid #4183D7;
   border-right: 0.15em solid #4183D7;
   -moz-transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
 }
 
 #bottom:hover:before
 {
   content: '';
   display: inline-block;
   margin-top: 0.6em;
   width: 1.2em;
   height: 1.2em;
   border-top: 0.15em solid #4183D7;
   border-right: 0.15em solid #4183D7;
   -moz-transform: rotate(135deg);
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
 }

    <div id="basso">
        <a href="#" id="freccia">
            <span id="bottom"></span>
        </a>
    </div>

双箭头 CSS

Double Arrow CSS

html

css

css-shapes