[分享]css两个向右箭头怎么设置

在网页中，我们经常需要使用箭头作为页面的元素，那么如何使用CSS来设置向右的箭头呢？下面分享两种设置方法。 /方法一：使用伪元素before和绝对定位/ .arrowright { width: 0;...

在网页中，我们经常需要使用箭头作为页面的元素，那么如何使用CSS来设置向右的箭头呢？下面分享两种设置方法。

 /*方法一：使用伪元素before和绝对定位*/
   .arrow-right {
      width: 0;
      height: 0;
      border-top: 20px solid transparent; /*上边框*/
      border-bottom: 20px solid transparent; /*下边框*/
      border-left: 20px solid black; /*左边框*/
      position: relative; /*相对定位*/
   }
   .arrow-right:before {
      content: ';
      display: block; /*块级元素*/
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 18px solid white;
      position: absolute; /*绝对定位*/
      left: -18px; /*相对于父元素左边界左移18px*/
      top: 0; 
   } 

方法一中，我们通过设置边框样式，构成一个三角形。接着使用伪元素before来生成一个白色三角形，在通过绝对定位left属性使其相对于父元素向左移动18px位于黑色三角形内，形成箭头效果。

 /*方法二：使用unicode字符和字体属性*/
   .arrow-right {
      font-size: 20px;
      line-height: 1;
      color: black;
      font-family: "fontawesome";
   } 

如果使用字体库FontAwesome，我们只需使用其向右的箭头字符"f061"，将其设置为元素的内容，并设置字体大小、行高、颜色和字体库属性即可。

通过以上两种方法，我们可以快速设置出向右的箭头并应用于网页中，并可根据需要自定义样式。