二重矢印CSS

Question

私は円で二重矢印を作成しようとしていますが、私はただ一つしか作成できません。 私は前に使いましたが、何もしませんでした。 これはコードです：

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

フィドル： fiddle

Answer 1

私はちょうど使用：前に、あなたが上で使用していたCSSをコピー：後、唯一のマージントップや位置を変えます。

#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

わかりましたが、すべての方法ではありませんそのように、私は、私はそれの背中を破ったと思います。

私は2番目の矢を作るためにbeforeを使用しました：jsfiddle