雙箭頭CSS

Question

我想創建一個雙向箭頭圈，但我可以創建一個。我試過之前使用過，但沒有做任何事情。 這是代碼：

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

小提琴： fiddle

Answer 1

我只是用：之前和複製你使用的CSS的：之後，只有改變的margin-top和位置。

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

 

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

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

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

 

 

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

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

 

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

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

Answer 2

好了，所以它不是所有的存在方式，但我想我已經打破了它的背面。

我用before使第二個箭頭：jsfiddle