ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS_html/css_WEB-ITnose で描いた絵

CSS_html/css_WEB-ITnose で描いた絵

WBOY
リリース: 2016-06-24 11:32:14
オリジナル
941 人が閲覧しました

カタログ [1] 長方形 [2] 円 [3] 楕円 [4] 直角三角形 [5] 正三角形 [6] 平行四辺形 [7] 台形 [8] 六芒星 [9] 六角形 [10] 】 五芒星

シンプルな形

長方形

rree

div{    width: 100px;    height: 100px;    background-color: red;}
ログイン後にコピー

楕円

れー

直角三角形

れー

正三角形

rree

Parallelogram

rree

台形

div{    width: 100px;    height: 100px;    background-color: red;    border-radius: 50%;}
ログイン後にコピー

複雑なグラフィック

六芒星

2つの三角形が重なった

div{    width: 100px;    height: 50px;    background-color: red;    border-radius: 50%;}
ログイン後にコピー

六角形

二つの台形を繋ぎ合わせたもの

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom-color: red;}
ログイン後にコピー

五芒星

手前の同じ形を二つ重ねたもの

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-width: 86.6px 50px;    border-bottom-color: red;}
ログイン後にコピー

れー

継続的に更新...

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート