まえがき
CSSを使用して実装する前にJSを使用して行われていたことの多くは、多くの場合、いくつかのタスクを簡素化します。 この記事では、真ん中にあるバルーンの三角形の矢印を垂直に揃える方法と、この三角形を描くために画像を使用しないようにする方法について説明します。
手始めに、すべてのコードをリストする
HTMLマークアップ（以下、内部にスペースのあるスパンなしの実装について説明します）
<p class="balloon"> <span class="arrow"> </span>My CSS balloon </p>
CSS
.balloon{ position:absolute; left:40px; top:20px; width:200px; height:auto; /* */ background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } .balloon>.arrow{ position:absolute; left:-10px; top:50%; margin-top:-10px; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; }
そして今、順番に
CSSを使用して三角形を描く方法は？
.balloon>.arrow{ width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; }
この方法の仕組みの視覚的な説明：
垂直の中央に三角形を配置する方法は？
まず、絶対配置の要素Aが、相対（または絶対）配置の要素Bでラップされた要素Aの要素Bの左上隅にゼロ座標があることを思い出させてください（つまり、要素B内に配置されます）
.balloon{ position:absolute; } .balloon>.arrow{ position:absolute; }
次に、バルーンの高さが静的ではないという事実を考慮して、垂直の中央に三角形を配置する必要があります。 これは次のように行われます。
top = balloonHeight/2 - arrowHeight/2
ただし、CSSを使用してバルーンの高さを取得することはできません。 これには美しい方法があります。
バルーンの高さの50％で三角形をYに揃えます（balloonHeight / 2を置き換えます）
.balloon>.arrow{ position:absolute; top:50%; }
バルーンの半分の高さから、三角形の半分の高さを引く必要があります。
.balloon>.arrow{ position:absolute; top:50%; margin-top:-10px; }
同様に、位置合わせは水平方向の中央で実行されます。
デモ
静的な高さ： jsfiddle.net/mdQzH/362
動的な高さ： jsfiddle.net/mdQzH/465
セレクターとコンテンツプロパティの前を使用してリリース
dshsterの要請により
HTML
<p class="balloon"> Balloon </p>
CSS
.balloon{ display:block; position:absolute; left:40px; top:20px; width:200px; height:auto; /* */ background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; } .balloon:before{ content: '.'; position:absolute; left:-10px; top:50%; margin-top:-10px; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #fff; }
デモ
jsfiddle.net/mdQzH/474
影付きのバルーン
niko83のリクエストで
HTML
<p class="balloon"> Balloon </p>
CSS
.balloon{ display:block; position:absolute; left:40px; top:10px; width:200px; height:auto; background:#fff; padding:10px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; moz-box-shadow:0 0 7px #bbb; -webkit-box-shadow:0 0 7px #bbb; box-shadow:0 0 7px #bbb; } .balloon:before{ content:" "; position:absolute; left:-10px; top:50%; margin-top:-10px; z-index:1; display:block; width: 0px; height: 0px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 11px solid #fff; /* */ } .balloon:after{ content:" "; position:absolute; left:0px; top:50%; margin-top:-2px-; z-index:0; display:block; width: 4px; height: 4px; moz-box-shadow:-8px 0 7px #555; -webkit-box-shadow:-8px 0 7px #555; box-shadow:-8px 0 7px #555; }
大きな三角形の下に小さなブロックが配置され、三角形に収まります。 彼には影のあるスタイルが割り当てられています。 エッジの影の彩度は低いため、この例では、影の色は#bbbではなく＃555であることに注意してください
デモ
jsfiddle.net/mdQzH/586