Pure CSS3 implementation of common small arrow examples in web pages-CSS Tutorial-php.cn

Pure CSS3 implementation of common small arrow examples in web pages

小云云

Release： 2018-05-28 13:52:00

Original

2411 people have browsed it

This article mainly introduces the relevant information about using pure CSS3 to realize the common small arrows in web pages. Friends who need it can refer to it. I hope it can help everyone.

/* css3三角形（向上 ▲） */
p.arrow-up {
 width:0px;
 height:0px;
border-left:5px solid transparent;  /* 右透明 */
 border-right:5px solid transparent; /*右透明 */
  border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */
  font-size:0px;
  line-height:0px;
}
/* css3三角形（向下 ▼） */
p.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
/* css3三角形（向左） */
p.arrow-left {
  width:0px;
  height:0px;
  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:0px;
  line-height:0px;
}
/* css3三角形（向右） */
p.arrow-rightright {
  width:0px;
  height:0px;
  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:0px;
  line-height:0px;
}

Copy after login

Related recommendations:

CSS to achieve a rectangular effect with a small triangular arrow_html/css_WEB-ITnose

How to create a layer with a small arrow on the right using css+p_html/css_WEB-ITnose

##Introduction to the usage of JavaScript arrow functions

The above is the detailed content of Pure CSS3 implementation of common small arrow examples in web pages. For more information, please follow other related articles on the PHP Chinese website!