10

基本的な CSS を使用して、HTML ページで三角形を作成したいと考えています。読み込みに時間がかかる三角形の写真を使用しているため、ページの読み込み時間を短縮したいと考えています。

4

4 に答える 4

34

HTMLではできませんが、CSSではできません。例：

<div class="triangle></div>

.triangle {
    width: 0;
    height: 0;
    border: solid 30px;
    border-color: transparent transparent black transparent;
}

ライブデモ: jsFiddle

  • 30pxプロパティで、border幅と高さのサイズを定義します。小さいまたは大きい三角形が必要な場合は、これを変更できます。
  • 三角形を回転させたい場合は、プロパティでblackとの位置を切り替えます。jsFiddleを参照してくださいtransparentborder-color
于 2012-09-18T18:58:44.150 に答える
22

これは、CSS 三角形を作成する方法に関する最良の説明です: http://www.uselesspickles.com/triangles/

幅または高さのない div を作成すると、一部の境界線を透明のままにしておくと、境界線が三角形を作成してしまいます。

クレジットこのページは、他の人がこのトリックを理解するよりずっと前に、同僚によって書かれました。

#tri {
  width: 0;
  height: 0;
  border-top-width: 20px;
  border-top-style: solid;
  border-top-color: transparent;
  border-right-width: 20px;
  border-right-style: solid;
  border-right-color: red;
}
<div id="tri"></div>

jsFiddle デモ

于 2012-09-18T18:58:59.230 に答える
3

CSS三角形を作る裏技は

  1. 空の作成div
  2. 高さと幅を 0 にします。
  3. 2 つの反対側に同じボーダー幅を与え、それらを透明にします。
  4. 3 番目の境界線の幅を同じにし、単色にします。

お役に立てれば。

このjsFiddleを確認してください

于 2012-09-18T19:00:47.997 に答える