Draw triangular arrows with CSS-CSS Tutorial-php.cn

Draw triangular arrows with CSS

高洛峰

Release： 2016-11-05 16:39:23

Original

1698 people have browsed it

Draw triangular arrows with CSS. Using pure CSS, you only need very little code to create triangular arrows that are compatible with various browsers!

CSS code:

/* create an arrow that points up */
div.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points down */
div.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points left */
div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-right: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-left: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

Copy after login

The key to drawing these triangles is that you want the two sides in the direction of the arrow to have thick borders. The side facing away from the arrow also has the same thick border, and the color of this side is the color of your triangle. The thicker the border, the larger the triangle. This way you can draw arrows of various colors, sizes, and orientations. The best part is, you only need a few lines of CSS code to achieve this effect.