CSS で五芒星を描画_CSS/HTML

1 六角形

复制代代码如下:

#star-six {
幅: 0;
高さ: 0;
border-left: 50 ピクセルのソリッド透明;
border-right: 50 ピクセルのソリッド透明;
border-bottom: 100 ピクセルのレッドソリッド;
位置: 相対;
}
#star-six:after {
幅: 0;
高さ: 0;
左ボーダー: 50 ピクセル単色透明;
右ボーダー: 50 ピクセル単色透明;
上ボーダー: 100 ピクセル赤単色;
位置: 絶対;
コンテンツ: "";
上: 30px;
左: -50px;
}

2 五角星

复制代代幣如下:

#star-five {
マージン: 50px 0;
位置: 相対;
表示: ブロック;
色: 赤;
幅: 0px;
高さ: 0px;
border-right: 100px 単色透明;
border-bottom: 70px 赤単色;
border-left: 100px 単色透明;
-moz-transform: 回転(35度);
-webkit-transform: 回転(35度);
-ms-transform: 回転(35度);
-o-transform: 回転(35度);}
#star-five:before {
border-bottom: 80px ソリッドレッド;
border-left: 30px ソリッド透明;
border-right: 30px ソリッド透明;
position : 絶対;
高さ: 0;
幅: 0;
上: -45px;
左: -65px;
表示: ブロック;
コンテンツ: '';
-webkit-transform:回転(-35度);
-moz-transform: 回転(-35度);
-ms-transform: 回転(-35度);
-o-transform: 回転( -35deg);

}
#star-five:after {
位置: 絶対;
表示: ブロック;
色: 赤;
上部: 3px; 左: -105px;
幅: 0px;
高さ: 0px;
border-right: 100px 単色透明;
border-bottom: 70px 単色赤;
border-left: 100 ピクセルの単色透明;
-webkit-transform:回転(-70度);
-moz-transform: 回転(-70度);
-ms-transform: 回転(-70度);
- o-transform: 回転(-70度);
コンテンツ: '';
}

3 五边形

复制代スパン>代码如下:

#pentagon {
位置: 相対;
幅: 54px;
border-width: 50px 18px 0;
border-style : ソリッド;
border-color: 赤透明;
}
#pentagon:before {
content: "";
position: 絶対;
高さ: 0;
幅: 0;
上: -85px;
左: -18px;
border-width: 0 45px 35px;
border-style: 単色;
border-color: 透明、透明、赤;
}

4 六角形

复制代代次如下:

#hexagon {
幅: 100px;
高さ: 55px;
背景: 赤;
位置: 相対;
}
#hexagon:before {
内容: "";
位置: 絶対;
上: -25px;
左: 0;
幅: 0;
高さ: 0;
border-left: 50px 単色透明;
border-right: 50px 単色透明;
border-bottom: 25px 単色赤;
}
#hexagon:after {
content: "";
position: 絶対;
bottom: -25px;
left: 0;
width: 0;
高さ: 0; border-left: 50px 単色透明;
border-right: 50px 単色透明;
border-top: 25px 単色赤;
}

5 多边形

复制代代幣如下:

#octagon {
幅: 100px;
高さ: 100px;
背景: 赤;
位置: 相対;
}

#octagon:before {
content: "";
position: 絶対;
top: 0;
left: 0;
border-bottom: 29px Solid赤;
border-left: 29px 実線 #eee;
border-right: 29px 実線 #eee;
幅: 42px;
高さ: 0;
}

#octagon:after {
content: "";
position: 絶対;
bottom: 0;
left: 0;
border-top: 29px ソリッドレッド;
border-左: 29 ピクセルの実線 #eee;
border-right: 29 ピクセルの実線 #eee;
幅: 42 ピクセル;
高さ: 0;
}

6 心形

复制代代幣如下:

#heart {
位置: 相対;
幅: 100px;
高さ: 90px;
}
#heart: before,
#heart:after {
位置: 絶対;
コンテンツ: "";
左: 50ピクセル;
上: 0;
幅: 50ピクセル;
高さ: 80px;
背景: 赤;
-moz-border-radius: 50px 50px 0 0;
border-radius: 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%;
}