Take you to play with various direction arrows in css

When developing pages, I encounter many lists that require the use of arrows. You can directly use pictures as background paving. Pure CSS can also be used, and there are no compatibility concerns. No need CSS3, by comparison, works better than images.

Principle: For a square with equal height and width, select a side you need and intercept it to become a trapezoid. When the height and width are both 0 and the other sides are transparent, a triangle It comes out

Trapezoidal code:

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

Set the height and width to 0, and the other sides are transparent colors, and the triangle comes out:

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

In development, you can use pseudo-classes to position the implementation without changing the dom structure, which is simple and elegant. content provides the position of the triangle. This attribute cannot be missing.

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:&#39;&#39;;
}

Now that we are pursuing graphic design, there is another type of triangular line arrow, which is more popular.
Set two pseudo-classes. The first pseudo-class covers the other pseudo-class. Just leave some lines out:

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        content: "";
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   }

may you like it.

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/qq_34250472/article/details/55513862

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of Take you to play with various direction arrows in css. For more information, please follow other related articles on the PHP Chinese website!