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 {/*box-shadow is For sample*/
    -moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    -webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
    box-shadow:3px 3px 3px rgba(0,0,0,0.7);
}

cross

class：square cross

.square.cross {
    width:25px;
    left:37.5px;
}
.cross::before {
    content:"";
    display:block;
    width:100%;	
    height:100%;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
    background:rgb(80,80,200);
}

The width of the element is specified for 1/4 of the height. And make before pseudoelement content, change to block, And 100% width and height, And 90-degree rotation.

The reference point of the rotation is possible to specify with transform-origin. But, that’ s default values is center. So, I don’t touch it.

times

class：square cross batu (‘BATU’ is a name of the sign that shows ‘Times’ in Japanese.)

.shapesDemo .sample .square.cross.batu {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Only 45-degree rotation added to “cross”.

asterisk

class：square cross asterisk

.square.cross.asterisk::before {
    -moz-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}
.square.cross.asterisk::after {
/*that increases one line Content*/
    content:"";
    display:block;
    width:100%;
    height:100%;
    -moz-transform:rotate(-60deg);
    -webkit-transform:rotate(-60deg);
    transform:rotate(-60deg);
    background:rgb(50,50,200);
/*Before pseudoelement
has already been generated,
so, the following specification
is necessary to pile it up.*/
    position:absolute;
    top:0;
    left:0;
}

rounded square

class：square rounded

.rounded {
    -moz-border-radius:10px;
    border-radius:10px;
}

To round the corner, border-radius is specified. in Firefox3.6,-moz- vender-prefix is necessary.

circle

class：square circle

.circle {
    -moz-border-radius:50%;
    border-radius:50px;
}

When the value of border-radius is adjusted to 50% (height and width), square becomes circle.

Because it is not possible to specify it with % in webkit, it specifies it by the numerical value.I want to support % specification by all means.

By the way, I was not daily using the English word “Radius”. Other Japanese people too, I think.

However,I remembered “r”. Once upon a time, I learned it in the elementary school as formulas 2πr and πr²…

And when saying, other “There were a lot of car accidents of this road because “r” was large” etc. , the initial “r” was noticed to be used!

ellipse

class：square ellipse

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

Four values can be specified for border-radius.top-left,top-right,bottom-right, and bottom-left. In addition, it is possible to specify it by delimiting radius in the direction of x and y by/as a value of radius of each corner.

There are a major axis and a minor axis in the oval. If it is an oblong oval, half the value of width becomes a major axis, and half the value of height becomes a minor axis.

When the ratio in length and breadth is an oval of 1:2,X of radius of four corners is adjusted to 50%, and y is adjusted to 25%.

It is necessary to specify webkit by the numerical value.

tube

class：square tube

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

When x of four “border-radius” is adjusted to 50%, and y is adjusted from 26 to less than 50%, it becomes the outline of the cylinder that collapses to the vertical direction.

It becomes a tube if content is generated with ::after pseudoelement of this element, the same specification as the “oval” is done, and it arranges it by the absolute configuration up.