CSS三角_html/css_WEB-ITnose

上三角▲

rree

下三角?

rree

左三角形

rree

直角三角形

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: transparent transparent #000 transparent;

三角形を配置する必要がある場合は、positionを追加してください

三角形のサイズはborder-widthを変更し、colorはborder-colorの色の値を変更します。

IE6/7/8 および Firefox でテストされており、互換性の問題はありません。IE6 では、border-color の透明属性がサポートされていないことに注意してください。つまり、三角形の周囲の領域はサポートされません。解決策は 2 つあります:

1. 三角形の背景が単色の場合、border-color の透明を対応する色の値に変更します

2. 三角形の背景が単色の場合単色を使用するには、IE6 で CSS を変更して透明度をサポートする必要があります。これはオンラインで入手できます。個人的には、JS??DD_belatedPNG の使用をサポートしています。これについては、後でブログ投稿で紹介します。