css右箭头,html的左右箭头怎么打出来

右箭头符号

荆轲刺秦王

在制作网页的时候,我们可能会有这样的需求:比如

我们需要做一个小箭头,最简单的办法就是直接用数学符号:">",但是这样做的缺点就是没有办法调节符号的大小,颜色......这就非常不理想.我在网上找到了一篇博客,专门解决了这个问题:

原文链接:https://blog.csdn.net/Che_rish/article/details/78871662

原文是在做手机端网页时候右箭头的解决方案,如果想要换成PC端的网页效果,需要做一点小小的改动:

1.我首先在每个li里面都有一个a标签:

园区新闻

可以看到,我直接加了一个

2.重点看我css样式:

/*右箭头*/

.right-arrow {

display :inline-block;

position: relative;

width: 28px;

height: 28px;

margin-right: 20px;

}

.right-arrow::after {

display: inline-block;

content: " ";

height: 13px;

width: 13px;

border-width: 3px 3px 0 0;

border-color: #0177ff;

border-style: solid;

transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

position: absolute;

top: 50%;

left: 150px;

}

我把颜色,大小,位置做了一点改变,具体实现可以根据项目需求来改进.

博主还做了上下箭头和三角箭头,我这里没有用到,所以就不再多加累述.