웹페이지에서 흔히 볼 수 있는 작은 화살표를 구현한 순수 CSS3 예제

이 글은 주로 순수 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;
}

요약

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