CSS で三角形と平行四辺形を実装するにはどうすればよいですか?

最近、技術的なウェブサイトを閲覧していたときに、記事内のキーワードのスタイル、つまりページネーションのスタイルがとてもクールだと感じました。スクリーンショットは次のとおりです:

ホームページの下部にもこのようなページング バーが表示されます。素敵だと思いませんか?これがどのように達成されるかを見てみましょう~

最初の方法: border を使用する

最初の方法は、border 属性を使用して三角形を切り抜き、次に 2 つの三角形を長方形を通して継ぎ合わせ、最終的に平行四辺形を作成することです。なぜ境界線を使用して三角形を生成できるのでしょうか?まずは写真を見てみましょう:

写真の中の 3 つの小さな形の変化の過程を見れば、すでに半分は理解できるはずです。実際、ハッキングで三角形を作成するには 2 つの条件だけが必要です。まず、要素自体の長さと幅が 0 であること、次に不要な部分が境界線の色で隠されていることです。同様の方法で、台形も作成できます。上の図の 3 つの形状のコードは次のとおりです。

#first {

幅: 20px;

高さ: 20px;

border-width: 10px;

border-style: ソリッド;

border-color: 赤、緑、青、茶色;

}

# 2 番目 {

幅: 0;

高さ: 0;

ボーダー幅: 10px;

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

ボーダーカラー: 赤、緑、青、茶色;

}

#サード {

width: 0;

height: 0;

border-width: 10px;

border-style: Solid;

border-color: red 透明な透明な透明な;

}

次のステップは、どのようにするかを検討することです。接続する 平行四辺形が描かれます。ボーダー方式では、左三角形、長方形、右三角形の 3 つの部分で構成されます。平行四辺形を描画するたびに 3 つの要素を作成するのは面倒すぎるため、ここでは :before および :after 疑似要素を使用するのが良いでしょう。この効果を実現しましょう:

三角形と長方形をシームレスにつなぎ合わせるには、多くの属性が一貫している必要があるため、Less、Sass、Stylus などの CSS プリプロセッサを使用してこのコードを記述すると、メンテナンスが容易になります。 SSS バージョンのコードを以下に示します。

//三角形の幅と高さ

$height: 24px;

$width: 12px;

//平行四辺形の 3 つの部分に色を割り当てます

@mixinParallelaircolor($color) {

背景 : $color;

&:before { ボーダーカラー: 透明 $color $color 透明; }

&:after { ボーダーカラー: $color 透明 透明 $color }

}

//単一三角形スタイル

@mixin Triangle() {

content: '';

display: block;

width: 0;

height: 0;

position:絶対;

border-style:solid;

border-width: $height/2 $width/2;

top: 0;

}

//Parallelogram style

.para {

display: inline-block;

position:相対;

padding: 0 10px;

height: $height;

line-height: $height;

margin-left: $width;

color: #fff;

&:after {

@include三角形( );

right: -$width;

}

&:before {

@include三角形();

left: -$width;

}

@includeParallel-color(red);

}

$heightと$widthで設定した三角形の傾きが小さすぎたり大きすぎたりすると、レンダリングがギザギザになる可能性があるため、使用するときはさまざまな幅と高さの視覚効果をテストする必要があることに注意してください。それ。

HTML5 などの Web フロントエンド テクノロジを学習および交換したい場合、およびフロントエンドの側面についてさらに知りたい場合は、QQ 学習グループ (27062964) に参加して、一緒に学習してコミュニケーションし、自分自身を向上させ、学習することができます。マテリアルとソースコードの共有。または、リンクをクリックしてグループに直接参加します:

2 番目の方法: 変形を使用します

変形を使用して、平行四辺形を実現します。効果は次のようになります:

それを見た後、私はとても素晴らしいと思いました。それは、平行四辺形の外側の輪郭だけであることがわかります。 (メソッド 1 では、塗りつぶし効果のある平行四辺形しか作成できないため) これは、主に、transform: skew(...) を使用して実装するのが非常に簡単です。ソース コードを見てみましょう。

.city {

display: inline-block;

padding: 5px 20px;

border: 1pxソリッド #44a5fc;

color: #333;

transform: skew(-20deg);

}

上海

ということで、こんな効果が得られました:

この写真を見たら、きっとこう思うはずです:

心配しないでください。div 全体を歪めて、中央のテキストが傾いてしまいました。これは明らかに私たちが望んでいる効果ではありません。したがって、必要な効果を得るには、内部要素を追加し、内部要素を逆に歪ませる必要があります:

実装コードは次のとおりです。CodePen の例を使用します。ブロック;

パディング: 5px 20px;

ボーダー: 1px ソリッド #44a5fc;

カラー: #333;

transform: skew(-20deg);

}

.city div {

transform: skew( 20 deg）;

}

shanghai

summary bourder属性ハックを使用して三角形を作成し、最後に平行四辺形が実現します; 一方、2 番目の方法では、transform: skew を使用して、平行四辺形を取得します。全体として、2 番目の方法は最初の方法よりもはるかに小さく、理解しやすいです。唯一の欠点は、このサイトのページネーションで使用されているような台形を構築できないことです。

この記事がお役に立てば幸いです。

学習プロセス中に問題が発生した場合、または学習リソースを入手したい場合は、学習交換グループに参加してください

以上がCSS で三角形と平行四辺形を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。