简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS属性を使用してクリスマスツリーを描画する方法

一个新手
リリース： 2017-10-23 09:40:41
オリジナル
3094 人が閲覧しました

フロントエンドを学習している子供たちにとって、CSS を習得することは必須です。今回はCSSを使ってクリスマスツリーを描いていきます。

主な練習は、CSS での境界線の練習と習得です。

ボディにメインエリアを作成します

: ボーダーで構築した三角形がメインエリアにあります。

メインエリアの背景色を変更します: 高さを設定できます

最初の三角形を作成します:

ここでの各領域は長方形を表し、その長方形を変更することで三角形が取得されます

幅とここでの高さは実際には境界線の内側の長さであり、境界線の上下左右のプロパティをそれぞれ設定し、透明を使用して表示する必要のない境界線を非表示にします。

次に、P エリアを使用してトランクを作成します:

最終効果:

以上がCSS属性を使用してクリスマスツリーを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css クリスマスツリー
ソース：php.cn
前の記事：HTML + CSS の学習ポイント 次の記事：CSS でのセレクターの重み計算例の詳細なグラフィックとテキストの説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
9
1588
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！