CSS コード例: CSS code_html/css_WEB-ITnose で書かれたさまざまな図形とグラフィック

合計 20 個のグラフィックが収集および整理されており、より実用的であり、CSS コードに慣れることもできます。統合しましたので、間違いがあればご指摘ください。

1. 正方形



#square {

幅: 100px;

背景: 赤;}

2.




#rectangle {

幅: 200 ピクセル;

高さ: 100 ピクセル;

背景: 赤;}

#triangle-topleft {

幅: 0;

高さ: 0 ;

ボーダー上: 100 ピクセル ソリッド 赤;

ボーダー右: 100 ピクセル ソリッド

}

#tri角度 - 右上 {

幅: 0 ;

高さ: 0;

ボーダー上部: 100 ピクセル ソリッド 赤;

5.左下の三角形


#triangle-左下 {

幅: 0 ;

高さ: 0;

ボーダー下: 100 ピクセル透明;

6.

#三角形-bottomright {

width: 0;

height: 0;

border-bottom: 100px ソリッド 透明;

7.

#Parallelogram {

幅: 150px;

高さ: 100px;

-moz-transform: skew(20deg); -o-transform: スキュー(20deg ;
border-left: 50px ソリッド透明;

border-right: 50px ソリッド透明;

高さ: 0;

幅: 100px;

}

9. 六芒星

#star-six {

width: 0;

height : 0;

border-left: 50px ソリッド透明

border-bottom: 100 ピクセルの赤一色。

位置: 相対的。

}

#star-six:after {

width: 0;

高さ: 0;

境界左: 50 ピクセルの単色透明。

境界線右: 50 ピクセルの単色透明。

border-top: 100 ピクセルの赤一色。

位置: 絶対的。

コンテンツ: "";

トップ: 30ピクセル;

左: -50px;

}

10.五角星

#star-five {

margin: 50px 0;

位置: 相対的。

表示: ブロック;

色: 赤;

幅: 0px;

高さ: 0px;

border-right: 100ピクセルの単色透明。

border-bottom: 70px 赤一色。

border-left: 100px 単色透明。

-moz-transform: rotate(35deg);

-webkit-transform: 回転(35度);

-ms-transform: 回転(35度);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px 赤一色;

border-left: 30 ピクセルの単色透明。

border-right: 30 ピクセルの単色透明。

位置: 絶対。

高さ: 0;

幅: 0;

上部: -45px;

左: -65px;

表示: ブロック;

コンテンツ: '';

-webkit-transform: 回転(-35度);

-moz-transform: rotate(-35deg);

-ms-transform: 回転(-35度);

-o-transform: rotate(-35deg);

}

#star-five:after {

位置: 絶対;

表示: ブロック;

色: 赤;

上: 3px;

左: -105px;

幅: 0px;

高さ: 0px;

border-right: 100 ピクセルの単色透明。

border-bottom: 70 ピクセルの赤一色。

border-left: 100 ピクセルの単色透明。

-webkit-transform: 回転(-70度);

-moz-transform: rotate(-70deg);

-ms-transform: 回転(-70度);

-o-transform: rotate(-70deg);

コンテンツ: '';

}

11.五边形

#pentagon {

位置: 相対;

幅: 54px;

ボーダー幅: 50px 18px 0;

ボーダースタイル: ソリッド。

ボーダーカラー: 赤透明。

}

#pentagon:before {

content: "";

位置: 絶対的。

高さ: 0;

幅: 0;

上: -85px;

左: -18px;

ボーダー幅: 0 45px 35px;

ボーダースタイル: ソリッド。

border-color: 透明な透明な赤。

}

12.六边形

#hexagon {

width: 100px;

高さ: 55 ピクセル;

背景: 赤;

位置: 相対的。

}

#hexagon:before {

content: "";

位置: 絶対的。

上部: -25px; 

残り: 0;

幅: 0;

高さ: 0;

境界左: 50 ピクセルの単色透明。

境界線右: 50 ピクセルの単色透明。

border-bottom: 25 ピクセルの赤一色。

}

#hexagon:after {

content: "";

位置: 絶対的;

下部: -25px; 

残り: 0;

幅: 0;

高さ: 0;

境界左: 50 ピクセルの単色透明。

境界線右: 50 ピクセルの単色透明。

border-top: 25 ピクセルの赤一色。

}

13.桃心

#heart {

位置: 相対的;

幅: 100ピクセル;

高さ: 90ピクセル;

}

#heart:before,

#heart:after {

位置: 絶対;

内容: "";

左: 50ピクセル;

トップ: 0;

幅: 50ピクセル;

高さ: 80ピクセル;

背景: 赤。

-moz-border-radius: 50px 50px 0 0;

ボーダー半径: 50px 50px 0 0;

-webkit-transform: 回転(-45度);

-moz-transform: 回転(-45度);

-ms-transform: 回転(-45度);

-o-transform: 回転(-45度);

transform: 回転(-45度);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: 回転(45度);

-moz-transform: 回転(45度);

-ms-transform: 回転(45度);

-o-transform: 回転(45度);

transform: 回転(45度);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

14。無制限大記号

#infinity {

位置: 相対;

幅: 212ピクセル;

高さ: 100ピクセル;

}

#infinity:before,

#infinity:after {

content: "";

位置: 絶対的。

トップ: 0;

左: 0;

幅: 60ピクセル;

高さ: 60ピクセル;    

ボーダー: 20 ピクセルの赤一色。

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

-webkit-transform: 回転(-45度);

-moz-transform: 回転(-45度);

-ms-transform: 回転(-45度);

-o-transform: 回転(-45度);

transform: 回転(-45度);

}

#infinity:after {

left: auto;

右: 0;

-moz-border-radius: 50px 50px 50px 0;

境界半径: 50px 50px 50px 0;

-webkit-transform: 回転(45度);

-moz-transform: 回転(45度);

-ms-transform: 回転(45度);

-o-transform: 回転(45度);

transform: 回転(45度);

}

15.卵

#egg {

display:block;

width: 126px;

height: 180px;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

境界半径: 50% 50% 50% 50% / 60% 40% 40%

16. プロンプトダイアログボックス

#talkbubble {

幅: 120px;

高さ: 80px;

位置: 相対;

-webkit-border-radius: 10ピクセル;

境界線: 10px;

}

#talkbubble:before {

コンテンツ:"";

右: 100%;

幅: 0;

高さ: 0;

ボーダー上: 13 ピクセル ソリッド 透明;

ボーダー下: 13 ピクセル ソリッド 透明;

17.

#burst-8 {

背景: 赤;

高さ: 80 ピクセル;

テキスト整列: 中央;変換: 回転( 20度);

-moz-transform: 回転(20度);

-ms-transform: 回転(20度);

-o-transform: 回転(20eg);

transform: 回転(20度);

}

#burst-8:before {

content: "";

位置: 絶対的。

トップ: 0;

左: 0;

高さ: 80ピクセル;

幅: 80ピクセル;

背景: 赤。

-webkit-transform: 回転(135度);

-moz-transform: 回転(135度);

-ms-transform: 回転(135度);

-o-transform: 回転(135度);

transform: 回転(135度);

}

18.八角星

#burst-8 {

背景: 赤;

幅: 80ピクセル;

高さ: 80ピクセル;

位置: 相対的。

text-align: 中央;

-webkit-transform: 回転(20度);

-moz-transform: 回転(20度);

-ms-transform: 回転(20度);

-o-transform: 回転(20eg);

transform: 回転(20度);

}

#burst-8:before {

content: "";

位置: 絶対的。

トップ: 0;

左: 0;

高さ: 80ピクセル;

幅: 80ピクセル;

背景: 赤。

-webkit-transform: 回転(135 度);

-moz-transform: 回転(135度);

-ms-transform: 回転(135度);

-o-transform: 回転(135度);

transform: 回転(135度);

}

19.钻石

#cut-diamond {

ボーダースタイル: ソリッド;

ボーダーカラー: 透明、透明、赤、透明。

ボーダー幅: 0 25px 25px 25px;

高さ: 0;

幅: 50ピクセル;

位置: 相対的。

マージン: 20px 0 50px 0;

}

#cut-diamond:after {

content: "";

位置: 絶対的。

上: 25 ピクセル;

左: -25px;

幅: 0;

高さ: 0;

ボーダースタイル: ソリッド。

ボーダーカラー: 赤、透明、透明、透明。

ボーダー幅: 70px 50px 0 50px;

}

20.八卦

#in-yang {

width: 96px;

高さ: 48px;

背景: #eee;

境界線の色: 赤;

ボーダースタイル: ソリッド;

ボーダー幅: 2px 2px 50px 2px;

境界半径: 100%;

位置: 相対的。

}

#yin-yang:before {

content: "";

位置: 絶対的。

トップ: 50%;

残り: 0;

背景: #eee;

ボーダー: 18 ピクセルの赤一色。

境界半径: 100%;

幅: 12px;

高さ: 12px;

}

#yin-yang:after {

content: "";

位置: 絶対的。

トップ: 50%;

残り: 50%;

背景: 赤;

ボーダー: 18px ソリッド #eee;

境界半径:100%;

幅: 12px;

高さ: 12px;

}