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 番目の方法は最初の方法よりもはるかに小さく、理解しやすいです。唯一の欠点は、このサイトのページネーションで使用されているような台形を構築できないことです。

この記事が皆さんのお役に立てれば幸いです。実際、同じ原理がこの方法で作成できます。

推奨書籍:

HTMLとCSSでQQペンギンを作成する方法

CSS 3を使用して長い影を作成します

CSSを使用して動く猫の顔を実現します

以上がCSSで三角形や平行四辺形を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。