如何使用CSS制作箭头符号(2)-木庄网络博客

将显示一个带有红色三角形的图标

2345截图20181208102042.png

“大于号”的箭头

CSS代码

.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
 
.arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #5bc0de;
  border-right: solid 2px #5bc0de;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

运行结果

在浏览器上运行效果如下

2345截图20181208103201.png

在网页上这个箭头符号是经常可以用到的

制作向上的箭头

CSS代码

.arrow{
  width: 0px;
  border-color: #d9534f;
  border-style: solid;
  border-width: 30px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}

运行效果

在浏览器上显示如下效果

最后我们来看一下传统向右的箭头符号

CSS代码

.arrow {
  display:inline-block;
  height:40px;
  width:80px;
  background-color:#5bc0de;
  position:relative;
  top:40px;
}
 
.arrow:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:60px solid transparent;
  border-left:60px solid #5bc0de;
  left:80px;
  top:-37px;
}