グラフィックなしのCSSバルーン
職場で数回、気球（雲、物理学者）を作る必要に直面しました。 誰かが知らない場合、これらは漫画のキャラクターを声に出すために使用されるものです。 サイトのインターフェースでは、通常、要素のあらゆる種類のツールチップに使用されます。
かなり些細な外観の次のバルーン（右に三角形の付いた長方形のブロック）を入力すると、グラフィックスの助けを借りずにこの問題を何らかの形で突破することは可能でしょうか？ 基本的に、border *プロパティを使用してCSS矢印を描くのは簡単です。
一番下の行は、高さと幅がゼロのブロックの場合、象サイズのフレームが設定され、矢印が指す側でフレームの幅がゼロに設定され、2つのサイドフレームに透明色が設定され（IEにフィルターが使用されます）、1つの表示フレームがあります矢印。 この方法は、どこでも鉄筋コンクリートで機能します。
しかし、矢印が影を割り当てたい場合はどうでしょうか？ または、バルーン全体を1ピクセルまたは2ピクセルのフレームにしますか？
次の決定が思い浮かびます。
css
.b-ungle {
position: absolute;
width: 20px;
height: 20px;
overflow: hidden;
}
.b-ungle__rotate {
position: absolute;
width: 20px;
height: 20px;
-webkit-transform: rotate(45deg);
-khtml-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
html
<div class="b-ungle">
<div class="b-ungle__rotate"></div>
</div>
人間の言語に翻訳：1つのブロックが取得され、幅と高さが指定されます。 別のブロックがその中に配置され、絶対に配置されます。 次に、transform cssプロパティ（およびMozillaおよびWebkitの派生物）を使用して45度回転します。 それから、css-propertiesのtop、right、bottom、leftを使用して内部ブロックを移動し、物事は帽子の中にあります。 少なくとも1つのフレーム、少なくとも1つの影、少なくとも1つの下品な単語で囲まれたブロックにペイントできます。 そして、不要なものはすべてオーバーフローを使用して切り捨てられます。 外部ユニットで。
しかし、IEはどうですか？ IEには、transformプロパティを含むCSS 3の多くの機能をエミュレートできるフレームワークがたくさんあります。 ただし、IEのフィルターを使用すると、変換プロパティを使用するブラウザーとは若干異なる方法でブロックが回転するため、IEでは、他のブラウザーの場合とは少し異なる方法で内部ブロックを移動する必要がある場合があります。 しかし、いつものこと。
かなり良いように見えましたが、5番目のポイントの突き錐は悪い頭に休息を与えませんでした。 通常の細長いポインターで風船を作るというアイデアがありました。 そして、正方形を時計回りに回します-簡単なことです。
すぐに言ったのはやった 。 すべての好奇心people盛な人がコードから簡単に抽出できる詳細はロードしません。IEのおかげで、最初は単純なブロック構造を複雑にしなければならなかったとしか言えません。 残りは同じです。 1つのブロックが回転し、もう1つのブロックが不要なものをすべてカットします。
この方法の利点
-PNGを台無しにする必要はありません（矢印はどの背景にも完全にフィットします）。
-対角線の長さは、斜辺の平方が脚の平方の合計に等しい式によって簡単に計算されます。
-
-ほとんどの最新のブラウザでは、すべてが正しく表示されます。
この方法の欠点
-.htcファイルが使用されます。つまり、IEでJavaScriptが無効になっている場合、コーナーはありません。
-Operaでは、コーナーの9番目のバージョンもそうでない場合があります。
-IEとフィルターの偏心により、htmlコードが少なすぎます。
-デザイナーは、この方法では構成できないバルーンを簡単に描くことができます。
-IEには目に見える丸い角はありません（ただし、これは必要に応じて修正可能です）。
誰かがこの方法を真剣に使用するかどうかはわかりません。 私も脳を伸ばすことを主な目的として、彼らに戸惑っていました。 しかし、アイデア自体は、いくつかのsidな目的に適していることが判明する場合があります。 また、インターネット上で上記のすべてを最初に考えたのは私ではないことを十分に認めています。したがって、最初は革新的であるふりをしません。
コメントからの代替方法：
- 致命的な nicolasgallagher.com/pure-css-speech-bubbles/demo 、
-jkeks www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin 、
-SamDark rmcreative.ru
バルーンの使用例：
-z-store.ru （トップメニュー）、
-cnews.ru （右側のニュースリスト）、
-games.rambler.ru （ゲームブロックにカーソルを合わせた場合）、
-news.yandex.ru （引用ブロック）、
- ビジネスリンチスタジオArtemy Lebedev 、
-facebook.com （ユーザーの「名刺」）。
追伸：
私の複数文字を増幅した人のためのボーナストラック：
- ダース・ウェーダーvs. ルク・スカイウォーカー 、
- スティーブジョブズvs. ビル・ゲイツ 。
All Articles