CSS FAQ：多角形（三角形～六角形）の描き方

純粋な CSS を使用してポリゴンを描画するにはどうすればよいですか?この記事では純粋なCSSから始める三角形の描画方法を紹介し、四角形、五角形、六角形の描画方法を紹介します、高度な実装方法も類推で描画できますので、皆さんの参考になれば幸いです！

今日は、面接でよくテストされる CSS の質問について、CSS を使用して多角形を描画するという問題を学習します。今回は三角形、四角形、五角形、六角形を例に挙げますが、まずは必要な知識を理解してから始める必要があります。

1. 基礎知識予備

今回は、純粋な CSS の知識を使用していくつかの図形を描画します。 CSSの基礎知識ポイント - CSSボックスモデル。 [関連する推奨事項: "css ビデオ チュートリアル "]

上の図からわかるように、標準のボックス モデルcontent 、padding、border、marginで構成されているので、具体的な状況をコードで見てみましょう。

<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

レンダリングは次のとおりです:

2. 実際の戦闘

口だけで練習はありません。これらの基本的な CSS プロパティは、一般的な三角形、四角形、五角形を描画するために使用されます...

2.1 四角形

background-color プロパティを直接使用して描画できない場合は、四角形の場合、上の図を使用して、コンテンツの幅と高さをすべて 0 に設定し、境界線の幅と高さを設定すると、境界線のみで構成される四角形を取得できることがわかります。 . 四角形は、正方形、平行四辺形、長方形などに分割されます。 ここでは、上の 3 つのグラフィックを実装するために境界線を使用してみましょう。

2.1.1 正方形

まず、最も単純な正方形を実装しましょう。

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

効果は次の図に示されています:

2.1.2 長方形

2.1.1 ではすでにこれを実現しています。 border を使用して 正方形を実装するには、次に長方形を実装しましょう。これまでに学んだ数学的知識に基づいて、長さ ≠ 幅になるように正方形の長さと幅を調整するだけで済みます。次にそれを実装しましょう。

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 100px solid red;
  border-right: 100px solid red;
  border-top: 200px solid red;
}

効果は次の図に示されています:

2.1.3 Parallelogram

PS: 平行四辺形を実現するには、以下を使用する必要があります。 2 つの三角形の実装については、ここでは省略することをお勧めします。「読み方 2.2」に進んで三角形の実装を確認し、戻ってここで平行四辺形のメソッドを確認してください。

2.2の内容は読み終わったとして、次に、平行四辺形を実現します。

<div id="wrapper">
	<div class="public"></div>
	<div class="public move"></div>
</div>

*{
   margin: 0;
}
#wrapper {
	  position: relative;
}
.public {
   width: 0px;
   height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
  position: absolute;
}
.move {
  transform: rotate(180deg);
  top: 200px;
  left: 200px;
}

効果は以下の通りです。

2.2 三角形

これまでで最も単純な四角形が完成しましたので、ここまでです。さあ、もう感情はありませんか？では、ボーダーは四角形を実現できるので、三角形でも問題ありません。もちろん、三角形にはたくさんの種類があります。角度によって、鋭角三角形、直角三角形、鈍角三角形に分けられます。それぞれ分けて実装してみましょう。 一度。

2.2.1 鋭角三角形

まず、コンテンツの幅と高さを調整したときに、境界線の上下左右が占める状況を見てみましょう。は両方とも 0 です。

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid black;
  border-right: 200px solid blue;
  border-top: 200px solid pink;
}

レンダリングは次のとおりです:

画像から、左、右、上、下がすべて三角形を占めていることがわかります。 we ある三角形が必要なときは、残りの3つの三角形を非表示にすればよいのですが、transparent属性値を使えば枠線を非表示にできるので実装してみましょう。

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

効果は図に示されています:

2.2.2 直角三角形

この時点で、鋭角三角形を描くことができます。 , 直角 上の図に基づいて三角形を取得できます。境界線の 2 辺を表示するだけです。コードを試してください。

#main {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid red;
  border-right: 200px solid transparent;
  border-top: 200px solid transparent;
}

効果は図に示すとおりです:

2.2.3 鈍角三角形

上の図は、前のアイデアの実現可能性を確認します。それでは、鈍角三角形を実装する方法を考えてみましょう。これまでの考え方を踏襲することはできないので、考え方を変える必要があります。

我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！

<div></div>
<div></div>

#main1 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid red;
  border-left: 200px solid transparent;
}
#main2 {
  width: 0px;
  height: 0px;
  border-bottom: 200px solid black;
  border-left: 150px solid transparent;
  position: absolute;
  /*这里8px是浏览器中的margin自带的间距，之前没有处理*/
  top: 8px;
  left: 58px;
}

效果图如下所示：

这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。

2.3 五边形

三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。

<div id="wrapper">
    <div class="main1 tool"></div>
    <div class="main2 tool"></div>
    <div class="main3 tool"></div>
    <div class="main4 tool"></div>
    <div class="main5 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main2 {
    transform: rotate(72deg);
}
.main3 {
    transform: rotate(144deg);
}
.main4 {
    transform: rotate(216deg);
}
.main5 {
    transform: rotate(288deg);
}
.tool{
    width: 0px;
    height: 0px;
    border-right: 58px solid transparent;
    border-left: 58px solid transparent;
    border-bottom: 160px solid red;
    position: absolute;
    top: 0;
    left: 0;
}

效果如下图所示：

实现五边形的主要难点在于border的三个边的取值，以及旋转的角度。

2.4 六边形

到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
  <div class="main4 tool"></div>
  <div class="main5 tool"></div>
  <div class="main6 tool"></div>
</div>

*{
  margin: 0;
}
#wrapper {
  position: relative;
  top: 300px;
  margin-left: 300px;
}
.main2 {
  transform: rotate(60deg);
}
.main3 {
  transform: rotate(120deg);
}
.main4 {
  transform: rotate(180deg);
}
.main5 {
  transform: rotate(240deg);
}
.main6 {
  transform: rotate(300deg);
}
.tool{
  width: 0px;
  height: 0px;
  border-right: calc(60px / 1.732) solid transparent;
  border-left: calc(60px / 1.732) solid transparent;
  border-bottom: 60px solid red;
  transform-origin: top;
  position: absolute;
  top: 0;
  left: 0;
}

通过上面的方法实现五边形，这边难点主要是画出等边三角形。

上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！

<div id="wrapper">
  <div class="main1 tool"></div>
  <div class="main2 tool"></div>
  <div class="main3 tool"></div>
</div>

*{
    margin: 0;
}
#wrapper {
    position: relative;
    top: 300px;
    margin-left: 300px;
}
.main1 {
    width: calc(120px / 1.732);
    height: 120px;
    background-color: black;
}
.main2 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(120deg);
    background-color: black;
}
.main3 {
    width: calc(120px / 1.732);
    height: 120px;
    transform: rotate(240deg);
    background-color: black;
}
.tool{
    position: absolute;
    top: 0;
    left: 0;
}

好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。

原文地址：https://juejin.cn/post/7001772184498601991

作者：执鸢者

更多编程相关知识，请访问：编程入门！！

以上がCSS FAQ：多角形（三角形～六角形）の描き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。