[CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ

画像を使用せずに、div要素一つのみで正方形・ダイアモンド・台形・三角形・円・ハートなどさまざまな形状を作り出すスタイルシートを紹介します。

CSS3 Simple Shapes – Cheat Sheet

[ad#ad-2]

元記事では各スタイルシートがPDFでまとめられており、その中からいくつか紹介します。

• Suqre: 正方形
• Diamond: ダイアモンド
• Triangle: 三角形（右向き
• Chart: パックマン
• Heart: ハート（左傾き）

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]