2017-10-13 231 views
1

我想创建一个双向箭头圈,但我可以创建一个。我试过之前使用过,但没有做任何事情。 这是代码:双箭头CSS

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

小提琴: fiddle

回答

0

我只是用:之前和复制你使用的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>

1

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

我用before使第二个箭头:jsfiddle

+0

您使用的边距是有点过分,它扩大了一圈。只有你错过了:徘徊你没有改变到正确的颜色。 –