1
Q
双箭头CSS
A
回答
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
相关问题
- 1. 动画双箭头 - CSS
- 2. CSS箭头
- 3. CSS盒除箭头外有箭头
- 4. javascript es6双箭头功能
- 5. 点工具双箭头
- 6. CSS中的小箭头
- 7. 使一个小箭头CSS
- 8. 带边框的CSS箭头
- 9. 使用CSS的箭头
- 10. 居中的CSS箭头
- 11. CSS创建消息箭头
- 12. jquery tablesorter CSS箭头图标
- 13. 的CSS选择框箭头
- 14. CSS:请在纯CSS边框箭头
- 15. 什么是双箭头功能?
- 16. 转换双脂箭头标准功能
- 17. 双击QTreeView展开项目箭头
- 18. JavaFX线/箭头箭头
- 19. 绘制导航箭头形状的CSS
- 20. CSS如何高度步骤箭头
- 21. CSS箭头不透明度转换
- 22. 菜单项下的Css箭头
- 23. css下拉列表菜单箭头
- 24. 2个箭头内的CSS边框
- 25. 箭头向下弹跳动画css
- 26. 列表悬停上的CSS箭头
- 27. td标签内的css纯箭头
- 28. CSS重叠的透明箭头元素
- 29. 无法找到wijmo下拉箭头css
- 30. (向下)带CSS的箭头框
您使用的边距是有点过分,它扩大了一圈。只有你错过了:徘徊你没有改变到正确的颜色。 –