四角 square

class：square

/*square. This shape is origin of other shapes.*/
.square {
    width:100px;
    height:100px;
    margin:20px;
    position:relative;
    background:rgb(100,100,255);
}
.square:hover {/*サンプル用。マウスhoverで影を付ける*/
    box-shadow:3px 3px 3px rgba(0,0,0,0.7);
}

十字 cross

class：square cross

.square.cross {
    width:25px;/*その要素自身の幅を、高さの1/4に指定。*/
    left:37.5px;
}
.cross::before {
    content:"";	/*before疑似要素のcontent*/
    display:block;	/*ブロック化*/
    width:100%;	/*幅と高さを100%に*/
    height:100%;
    /*90度回転。回転の基準点はデフォルトで中心なので指定しない*/
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    /*色を変えたのはサンプルとしての分かり易さのため*/
    background:rgb(80,80,200);
}

×（バッテン）

class：square cross batu

.shapesDemo .sample .square.cross.batu {
    -moz-transform:rotate(45deg);	/*45度回転。*/
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

アスタリスク asterisk

class：square cross asterisk

/*アスタリスクasterisk*/
.square.cross.asterisk::before {
    -moz-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}
.square.cross.asterisk::after {	/*線を一本増やす*/
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
    transform:rotate(-60deg);
    /*色を変えたのはサンプルとしての分かり易さのため*/
    background:rgb(50,50,200);
    /*before疑似要素が既に生成されているので、
    重ねる為には以下の指定が必要。*/
    position:absolute;
    top:0;
    left:0;
}

角丸四角 rounded square

class：square rounded

.rounded {
    border-radius:10px;
}

角を丸めるにはborder-radiusを指定する。Firefox3.6では-moz-というベンダープレフィックスが必要。

正円 circle

class：square circle

.circle {
    border-radius:50%;
}

border-radiusの値を、高さ・幅の50%にすると正円になる。

webkitでは%での指定ができないので数値で指定。ぜひ%指定もサポートして欲しい。サポート済み。

radiusという単語は聞き慣れないが、英語での半径のこと。2πrとか、πr²の公式に出てくるrや、「この道はrがキツくて事故が多い」などと言う時のrはradiusの頭文字だ。

楕円 ellipse

class：square ellipse

.ellipse {
    height:50px;
    -moz-border-radius:50%/25%;
    border-radius:50px/25px;

    border-radius:50%;

}

border-radiusには左上、右上、右下、左下の順番で4つの値を指定できる。さらに、それぞれの角のradiusの値としてx方向のrとy方向のrを/で区切って指定できる。

楕円には長径と短径がある。横長の楕円なら、幅の半分の値が長径になり、高さの半分の値が短径になる。

縦横比が1：2の楕円なら、4つの角のrのx方向を50%、y方向を25%にする。

webkitは、やはり%が使えないので数値で指定。

border-radius:50%;だけで楕円になります。

円筒 tube

class：square tube

.tube {
    border-radius:50%/25%;
}
.tube:after{/*フタ部分*/
    content:"";
    display:block;
    position:absolute;
    top:2px;
    left:2px;
    width:96px;
    height:48px;
    border-radius:50%;
    background:rgb(150,150,255);
}

4つのborder-radiusのx方向を50%、y方向を50%未満26%以上にすると、縦方向に潰れて筒の様なアウトラインになる。

この要素の::after疑似要素でcontentを生成し、楕円と同じ指定をして、絶対配置で上に揃えると筒になる。