Basic figure drawn with CSS3

It is possible to draw various figures by drawing of CSS and CSS3. It doesn’t become a reason why drawing by pure CSS is not used for the web expression though it is

necessary to consider how to support a browser of IE8 or less.

CSS3 is convenient, and sexy. But, it looks complex.

It is necessary to enjoy the expression by CSS3 positively. I think that it is the best practice of the understanding of css3.

However, the clue of something is necessary.

I think that you should understand the method of making a basic figure as for the first step. As much as the time before when we learned Adobe Illustrator.

There is a good explanation by Mozilla. I brought it together by the viewpoint of drawing style in a basic figure.




class:square cross

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.


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

Only 45-degree rotation added to “cross”.


class:square cross asterisk

rounded square

class:square rounded

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


class:square circle

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 πr2

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!


class:square ellipse

Four values can be specified for,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.


class:square tube

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.


メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください