[CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ
Post on:2011年6月6日
画像を使用せずに、div要素一つのみで正方形・ダイアモンド・台形・三角形・円・ハートなどさまざまな形状を作り出すスタイルシートを紹介します。
CSS3 Simple Shapes – Cheat Sheet
[ad#ad-2]
元記事では各スタイルシートがPDFでまとめられており、その中からいくつか紹介します。
Suqre: 正方形
HTML
<div id="square"></div>
CSS
#square { width: 100px; height: 100px; background: blue; }
Diamond: ダイアモンド
HTML
<div id="diamond"></div>
CSS
#diamond { width: 80px; height: 80px; background: blue; margin: 3px 0 0 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; }
Triangle: 三角形(右向き)
HTML
<div id="triangleRight"></div>
CSS
#triangleRight { width: 0; height: 0; border-left: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
Chart: パックマン
HTML
<div id="chartRight></div>
CSS
#chartRight{ width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid purple; border-left: 60px solid purple; border-bottom: 60px solid purple; -moz-border-radius:60px; -webkit-border-radius:60px; border-radius: 60px; }
Heart: ハート(左傾き)
HTML
<div id="heartLeft"></div>
CSS
#heart Left{ width: 0; height: 0; border-color: red; border-style: dotted; border-width: 0 80px 80px 0; }
[ad#ad-2]
sponsors