CSSで三角形や平行四辺形を描く方法
最近、CSS を使用してグラフィックを描画する方法を教える多くのチュートリアルをインターネット上で目にしました。今日は、CSS スタイル シートを使用して三角形と平行四辺形を描画する方法をまとめます。興味のある方は深く勉強してみてはいかがでしょうか。
最初の方法: border
1 つの長方形を使用して 2 つの三角形を結合し、最終的に平行四辺形を作成します。なぜ境界線を使用して三角形を生成できるのでしょうか?まずは写真を見てみましょう:
写真の中の 3 つの小さな形の変化の過程を見れば、すでに半分は理解できるはずです。実際、ハッキングに必要な条件は 2 つだけです。まず、要素自体の長さと幅が 0 であること、そして border-color によって不要な部分が非表示になっていることです。同様の方法で、台形も作成できます。上の図の 3 つの形状のコードは次のとおりです。 (CodePen の例を添付します。http://codepen.io/jerryzou/pen/mJYJym)
#first { width: 20px; height: 20px; border-width: 10px; border-style: solid; border-color: red green blue brown; } #second { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red green blue brown; } #third { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: red transparent transparent transparent; }
次のステップは、平行四辺形を接合する方法を検討することです。ボーダー方式では、左三角形、長方形、右三角形の 3 つの部分で構成されます。平行四辺形を描画するたびに 3 つの要素を作成するのは面倒すぎるため、ここでは :before および :after 疑似要素を使用するのが良いでしょう。この効果を実現しましょう:
三角形と長方形をシームレスにつなぎ合わせるには、複数のプロパティが一貫している必要があるため、Less、Sass、Stylus などの CSS プリプロセッサを使用してこのコードを記述します。メンテナンスが容易になります。 .Scss バージョンのコードは以下のとおりです。 (CodePen のリンク、http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)
//三角形的宽高 $height: 24px; $width: 12px; //对平行四边形三部分的颜色进行赋值 @mixin parallelogram-color($color) { background: $color; &:before { border-color: transparent $color $color transparent; } &:after { border-color: $color transparent transparent $color; } } //单个三角形的样式 @mixin triangle() { content: ''; display: block; width: 0; height: 0; position: absolute; border-style: solid; border-width: $height/2 $width/2; top: 0; } //平行四边形的样式 .para { display: inline-block; position: relative; padding: 0 10px; height: $height; line-height: $height; margin-left: $width; color: #fff; &:after { @include triangle(); right: -$width; } &:before { @include triangle(); left: -$width; } @include parallelogram-color(red); }
$height と $width で設定された三角形の傾きが小さすぎる場合や、大きすぎるとレンダリングがギザギザになる可能性があるため、使用する場合はさまざまな幅と高さの視覚効果をテストする必要があります。
2番目の方法:transformを使用します
transformを使用して平行四辺形を実現する方法は、私が買い物をしているときに見たものです。効果は次のとおりです。
それを見た後、私はこう思いました。驚くべきことに、それは平行四辺形の外側の輪郭しか持たないことがわかりました。 (メソッド 1 では、塗りつぶし効果のある平行四辺形しか作成できないため) これは、主に、transform: skew(...) を使用して実装するのが非常に簡単です。ソース コードを見てみましょう。
<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } </style> <div class="city">上海</div>
それで、次の効果が得られました:
この写真を見たら、次のように思うはずです:
心配しないでください、div全体を歪めて、中間を引き起こしましたテキストは次のとおりですまた傾いていますが、これは明らかに私たちが望んでいる効果ではありません。したがって、必要な効果を得るには、内部要素を追加し、内部要素を逆に歪ませる必要があります。
実装コードは次のとおりで、CodePen の例が添付されています (http://codepen.io /jerryzou) /pen/BNeNwV?editors=110)
<style> .city { display: inline-block; padding: 5px 20px; border: 1px solid #44a5fc; color: #333; transform: skew(-20deg); } .city div { transform: skew(20deg); } </style> <div class="city"> <div>上海</div> </div>
概要
最初のメソッドは、border 属性を使用して三角形をハッキングし、最後に 3 つの要素を接合することで平行四辺形を実現します。一方、2 番目のメソッドは、transform : skew を使用して平行四辺形を取得します。 。全体として、2 番目の方法は最初の方法よりもはるかに小さく、理解しやすいです。唯一の欠点は、このサイトのページネーションで使用されているような台形を構築できないことです。
この記事が皆さんのお役に立てれば幸いです。実際、同じ原理がこの方法で作成できます。
推奨書籍:
以上がCSSで三角形や平行四辺形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。
