Pure css to implement small arrow or triangle logo

As a front-end engineer, it is inevitable to use CSS to make some small arrows, triangles and other signs in your work. Now I will share with you how to make small arrows, triangles and other signs using pure CSS.

Implement the small arrow:

.arrow{
    width: 20px;
    height: 20px;
    margin-top: 50px;
    margin-left: 50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(45deg);/*旋转角度*/
}
<div class="arrow"></div>

Implement the triangle:

.triangle{
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: red transparent transparent transparent;
    transform:rotate(45deg);
}
<div class="triangle"></div>

(Free video tutorial: css video tutorial)

How to make Display multiple elements in one row?

(1) display: inline converts elements into inline elements, but the width and height attributes do not work

(2) display: inline-block can make elements displayed in one line, but it will Affected by spaces and line feed keys, there will be a default spacing

Solution:

1. Remove the effects of spaces and line feed keys so that the labels are all on one line (this method is not recommended for readability) Not good)

2. Add an attribute font-size:0

display:inline-block在ie6 7下不兼容的解决办法？
dispaly:inline;//css hack ie浏览器可以识别
zoom:1;//触发css hack的layout

3 to the parent element of the element with the display:inline-block attribute added. 3. Use floating float:left /right, but you need to clear the float

Related recommendations: CSS tutorial

The above is the detailed content of Pure css to implement small arrow or triangle logo. For more information, please follow other related articles on the PHP Chinese website!