html - ホバー時にdiv内の非長方形部分を強調表示する

Question

私は div (rectangle) を持っていて、その中に三角形を作りたいと思っています。ホバー時にそれを強調したいと思います。それ、どうやったら出来るの？

同じ形状で不透明度が異なる2つの画像を持ち、ホバー時にそれらを交換することを考えています。これを行う別の方法はありますか？四角形以外の div を作成できますか?

Answer 1

それは、Internet Explorer でどれだけ戻る必要があるか、および三角形を何に使用しているかについての三角形のコンテキストによって異なりますが、Internet Explorer を気にしないと仮定します。

@ CSS Tricks の Chris Coyer には、すでにセットアップされた素晴らしいチュートリアルがあります。
http://css-tricks.com/triangle-with-shadow/

アイコンまたはボタンとして使用する予定がある場合は、http://fortawesome.github.io/Font-Awesome/ を確認して ください。完全に無料で、実装が非常に簡単です。いくつかのプロジェクトで使用しましたが、ブートストラップで使用するために作成されました。

お役に立てれば。

Answer 2

あなたはそれを試すことができます： http://jsfiddle.net/H42U7/

CSSコードは次のとおりです。

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #959595;}

.triangle-up:hover {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #123456;}

html:

<div id="container">
<div class="triangle-up">
</div></div>

三角形を回転するには、このサイトを確認してください: http://css-tricks.com/examples/ShapesOfCSS/