CSSは、様々な形状を生成することが可能です。彼らはウェブ自然な形状であるため、正方形や長方形は簡単です。幅と高さを追加し、私たちは希望の四角形の正確なサイズを取得します。国境半径を追加する、あなたは、円形の形状に国境は十分の半径を置くことができ、あなたは、長方形、円形や楕円形にこれらを置くことができます。
我々はまた、前に:: CSSの擬似要素を使用して::の後、元の形状私たちに二つの追加要素を追加する可能性を提供していることができます。ポジショニング、変換、および他の多くの技術の巧妙な使用によって、我々は唯一のHTML要素とCSSで任意の数の形状を作成することができます。
私たちのほとんどは、現在のフォントアイコンやSVG画像を使用していますが、意義が素晴らしいではありませんアイコンを行うにはCSSを使用しているようだが、どのようにこれらのアイコンに使用される技術やアイデアのいくつかは、我々の研究の非常に価値がある達成します。
1.広場
#square {width: 100px;height: 100px;background: red;}
2.長方形
#rectangle {width: 200px;height: 100px;background: red;}
3.ラウンド
#circle {width: 100px;height: 100px;background: red;border-radius: 50%}
4.楕円
#oval {width: 200px;height: 100px;background: red;border-radius: 100px / 50px;}
トライアングル5.
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
6.下三角
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
7.左トライアングル
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
8.右のトライアングル
#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
9.左上隅
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
10.右上隅
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
11.左下隅
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
12.右下隅
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
13.アロー
#curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}
14.台形
#trapezoid {border-bottom: 100px solid red;border-left: 25px solid transparent;border-right: 25px solid transparent;height: 0;width: 100px;}
15平行四辺形
#parallelogram {width: 150px;height: 100px;transform: skew(20deg);background: red;}
16.スター（六角形）
#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
17.スター（5角）
#star-five {margin: 50px 0;position: relative;display: block;color: red;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(35deg);}#star-five:before {border-bottom: 80px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';transform: rotate(-35deg);}#star-five:after {position: absolute;display: block;color: red;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(-70deg);content: '';}
18.五角形
#pentagon {position: relative;width: 54px;box-sizing: content-box;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}
19.六角
#hexagon {width: 100px;height: 55px;background: red;position: relative;}#hexagon:before {content: "";position: absolute;top: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;}#hexagon:after {content: "";position: absolute;bottom: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid red;}
20.八角形
#octagon {width: 100px;height: 100px;background: red;position: relative;}#octagon:before {content: "";width: 100px;height: 0;position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}#octagon:after {content: "";width: 100px;height: 0;position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}
