Web ページ内の一般的な小さな矢印の例の純粋な CSS3 実装

この記事では、Web ページで一般的な小さな矢印を実現するための純粋な 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_html/css_WEB-ITnose

css+p右側に小さな矢印のあるレイヤーの作成方法_html/css_WEB-ITnose

JavaScriptのアロー関数の使い方の紹介

以上がWeb ページ内の一般的な小さな矢印の例の純粋な CSS3 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。