>  기사  >  웹 프론트엔드  >  웹페이지에서 흔히 볼 수 있는 작은 화살표를 구현한 순수 CSS3 예제

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

黄舟
黄舟원래의
2017-10-17 10:30:431698검색

이 글은 주로 순수 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.