CSS_html/css_WEB-ITnose を使用して三角形と平行四辺形を実装する

この記事はもともと私の個人ブログ「The Taste of Chewing

」で公開されたものです。最近テクノロジー Web サイトを閲覧していたとき、記事内のキーワードのスタイルがとてもクールだと感じました。そこで、その書き方を私のブログにコピーしました。最近私のブログを閲覧した友人は、ページネーションのスタイルを発見したのではないでしょうか。スクリーンショットは次のとおりです:

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

最初の方法: 境界線を使用します

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

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

#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 のリンクを添付)

うわー

$height と $width で設定された三角形の傾きが小さすぎるか大きすぎる場合、レンダリングでエイリアシングが発生する可能性があるため、結果をテストする必要があることに注意してください。使用時の幅と高さの違いは何ですか。

2 番目の方法:transform を使用する

transform を使用して平行四辺形を実現する方法は、買い物をしているときに見たものです。効果はおそらく次のとおりです。

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

そうですか

それで、次のような効果が得られました:

この写真を見たらこう思うはずです:

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

実装コードは、CodePen の例を使用して次のとおりです

//三角形的宽高$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);}

概要

最初の方法 境界属性ハックを使用します三角形を作成し、最後に 3 つの要素を接合することで平行四辺形を作成します。一方、2 番目の方法では、transform: skew を使用して平行四辺形を取得します。全体として、2 番目の方法は最初の方法よりもはるかに小さく、理解しやすいです。唯一の欠点は、このサイトのページネーションで使用されているような台形を構築できないことです。この記事がお役に立てば幸いです。