웹 페이지에서 일반적인 작은 화살표 예제의 순수 CSS3 구현

이 글은 웹 페이지에서 흔히 볼 수 있는 작은 화살표를 구현하기 위해 순수 CSS3를 사용하는 방법에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

/* 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;
}

관련 추천:

CSS는 작은 삼각형 화살표로 직사각형 효과를 얻습니다. JavaScript 화살표 함수 사용법 소개

위 내용은 웹 페이지에서 일반적인 작은 화살표 예제의 순수 CSS3 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!