純粋な CSS を使用してポリゴンを描画するにはどうすればよいですか?この記事では純粋なCSSから始める三角形の描画方法を紹介し、四角形、五角形、六角形の描画方法を紹介します、高度な実装方法も類推で描画できますので、皆さんの参考になれば幸いです！
今日は、面接でよくテストされる CSS の質問について、CSS を使用して多角形を描画するという問題を学習します。今回は三角形、四角形、五角形、六角形を例に挙げますが、まずは必要な知識を理解してから始める必要があります。
今回は、純粋な CSS の知識を使用していくつかの図形を描画します。 CSSの基礎知識ポイント - CSSボックスモデル。 [関連する推奨事項: "css ビデオ チュートリアル "]
上の図からわかるように、標準のボックス モデルcontent 、padding、border、marginで構成されているので、具体的な状況をコードで見てみましょう。
<!--HTML部分，此部分代码若是不变，后面将复用不在赘述--> <div id="main"></div>
/*css部分*/
#main {
width: 100px;
height: 100px;
border: 200px solid red;
}レンダリングは次のとおりです:
口だけで練習はありません。これらの基本的な CSS プロパティは、一般的な三角形、四角形、五角形を描画するために使用されます...
background-color プロパティを直接使用して描画できない場合は、四角形の場合、上の図を使用して、コンテンツの幅と高さをすべて 0 に設定し、境界線の幅と高さを設定すると、境界線のみで構成される四角形を取得できることがわかります。 . 四角形は、正方形、平行四辺形、長方形などに分割されます。 ここでは、上の 3 つのグラフィックを実装するために境界線を使用してみましょう。
まず、最も単純な正方形を実装しましょう。
#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.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;
}効果は次の図に示されています:
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;
}効果は以下の通りです。
これまでで最も単純な四角形が完成しましたので、ここまでです。さあ、もう感情はありませんか？では、ボーダーは四角形を実現できるので、三角形でも問題ありません。もちろん、三角形にはたくさんの種類があります。角度によって、鋭角三角形、直角三角形、鈍角三角形に分けられます。それぞれ分けて実装してみましょう。 一度。
まず、コンテンツの幅と高さを調整したときに、境界線の上下左右が占める状況を見てみましょう。は両方とも 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 辺を表示するだけです。コードを試してください。
#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;
}効果は図に示すとおりです:
上の図は、前のアイデアの実現可能性を確認します。それでは、鈍角三角形を実装する方法を考えてみましょう。これまでの考え方を踏襲することはできないので、考え方を変える必要があります。
我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！
<div id="main1"></div> <div id="main2"></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;
}效果图如下所示：
这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。
三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。
<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的三个边的取值，以及旋转的角度。
到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
