How to use css to implement triangle symbols (with code)-CSS Tutorial-php.cn

How to use css to implement triangle symbols (with code)

云罗郡主

Release： 2018-10-10 09:25:43

forward

2771 people have browsed it

The content of this article is about how to use css to implement triangle symbols. The code has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The picture below is an element with a length and width of 100px and a border width of 100px. It can be seen that the intersection of the upper, lower, left and right borders in CSS is not a straight line, so it can be written according to this attribute Triangle symbol

So how to use this property of css to achieve the effect of triangle symbol? The code is as follows:

html code

<body>
    <p></p></body>

Copy after login

css code

p:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

Copy after login

Rendering:

This method is to use pseudo-classes to implement triangle symbols, and then use absolute positioning, which will not take up space

transparent is a transparent color, if you want a triangle The directions of the symbols are different. Just add the border color in the corresponding direction and change the others to transparent colors.

The above is a complete introduction to how to use css to realize the triangle symbol (with code) , the content of this article is compact, I hope everyone can gain something, please pay attention to the PHP Chinese website for more.

The above is the detailed content of How to use css to implement triangle symbols (with code). For more information, please follow other related articles on the PHP Chinese website!