良いプログラマ純粋なCSSは、グラフィックスの様々なを描く学習共有するためのWebフロントエンドルートは、非常に多くの場合、ページのUIデザイナーが良く見える、我々は、など、三角形、四角形、円形、楕円形、吹き出し、などの装飾的なグラフィックスを、やるべきことがたくさん採用しますようにページ全体があまりにも単調に見えません。より多くのフロントエンドの開発時間としては、比較的簡単な方法を達成するために使用される結果ページを達成するために、画像や背景を使用することであるが、大きな問題があることは、いくつかの例では、画像が乱れることがありますです絵や背景を使用することが発見されます柔軟性が効果を達成するのに十分ではありません。だから、絵ではない場合、また、純粋なCSSを使用すると、グラフィックスの様々なを描くことができ、多くの人が、CSSのみ、このような長方形、正方形、円形、楕円形などのいくつかの簡単なグラフィックスを、書くことができ、それは真実ではないと思い、だけでなく、強力な基本的なCSSを描くことができますグラフィックスは、また、そのような愛、ダイヤモンド、太極拳のゴシップ、その上でいくつかのスピーチの泡と、より複雑なのいくつかを、描くことができます。これらの効果を達成するため、関連する属性はCSS3を使用します、我々はすべての互換性のあるブラウザのためのCSS3プロパティは非常に良いではありません知っているので、私は時に模倣これらの効果IEも見ることができますが、あなたは、オープンChromeとFirefoxのブラウザを使用することができますことを願っています部分的な結果は、より良い視聴体験のために、または参照するためにIEを使用していない、よく、ADOは、CSSはそれをレンダリングすると、これらのグラフィックを見てみましょう。
1、 向上三角形
CSSのコアコード
.triangleアップ{
幅：0;
国境左：透明は50px固体;
ボーダー右：は50px固体透明。
border-bottom：100pxに固体の赤。
}
図2に示すように、左上の三角形
CSSのコアコード
.triangle-TOPLEFT {
幅：0;
border-top：100pxに固体の赤。
border-right：100pxに透明な固体;
}
図3に示すように、湾曲した矢印の終わり
CSSのコアコード
.curvedarrow {
位置：相対;
幅：0;
border-top：90PX固体透明。
ボーダー右：90PX固体赤。
変換：回転（10deg）移動X（100％）。
}
.curvedarrow：後{
内容： "";
位置：絶対;
ボーダー：0透明な固体;
border-top：30px赤い固体;
境界半径：200pxの0 0 0。
トップ：-120px; 左：-90px;
幅：120ピクセル; 高さ：120ピクセル;
変換：回転（45deg）。
}
4、パックマン
CSSのコアコード：
。パックマン {
幅：0PX。高さ：0PX。
ボーダー右：60PX固体透明。
border-top：赤60PX固体;
国境左：赤60PX固体;
border-bottom：赤60PX固体;
border-top-左半径：60PX;
border-top-右半径：60PX;
ボーダー左下半径：60PX。
border-bottom-右半径：60PX;
}
5、鋭い角を持つトークバブル
CSSのコアコード：
.talkbubble {
幅：120ピクセル; 高さ：80px;
背景：赤;
位置：相対;
国境半径：10pxの;
}
.talkbubble：{の前に
内容： "";
位置：絶対;
右：100％; トップ：26px;
border-top：13px固体透明。
border-right：26px固体赤。
border-bottom：13px固体透明。
}
6、嗶哩嗶哩テレビ
CSSのコアコード
.TV {
位置：相対;
幅：200pxの。高さ：150ピクセル;
マージン：20ピクセル0;
背景：赤;
境界半径：50％/ 10％。
色：白;
テキスト整列：センター;
テキストインデント：.1em。
}
.TV：{の前に
内容： '';
位置：絶対;
トップ10％; 底部：10％。右：-5％。左：-5％。
背景：継承します。
境界半径：5％/ 50％。
}
7、拡大鏡
.magnifyingガラス{
フォントサイズ：10em;
表示：インラインブロック。
幅：0.4em; 高さ：0.4em;
ボーダー：0.1em赤色固体。
位置：相対;
国境半径：0.35em;
}
.magnifyingガラス：前{
内容： "";
表示：インラインブロック。
位置：絶対;
右：-0.25em。下：-0.1em。
ボーダー幅：0;
背景：赤;
幅：0.35em; 高さ：0.08em;
変換：回転（45deg）。
}
長いグラフィックスを指し8、
CSSのコアコード：
.pointer {
幅：200pxの。高さ：40ピクセル;
位置：相対;
背景：赤;
}
.pointer：後{
内容： "";
位置：絶対;
左：0; 下：0;
国境左：20ピクセル白色の固体;
border-top：20ピクセル固体透明。
border-bottom：20ピクセル固体透明。
}
.pointer：{の前に
内容： "";
位置：絶対;
右：-20px; 下：0;
国境左：赤20ピクセル固体;
border-top：20ピクセル固体透明。
border-bottom：20ピクセル固体透明。
}
最後に小さなパートナーは、ことを強調しておくいくつかのグラフィックスが使用しているため Mozilla Firefoxのは、Google Chrome、Safariの：CSS3のプロパティの一部をあなたはまだIEを使用している場合、私はあなたのような、近代的なブラウザを使用することをお勧め 、オペラ。実用的な効果の一部であってもなくても上に示したが、CSSを使用すると有効利用の三角形と円形または多く、ヒントを作るために使用され、特に効果を作ること。