cssはさまざまな基本的なグラフィックスを実装します-CSSチュートリアル-php.cn

cssはさまざまな基本的なグラフィックスを実装します

高洛峰

リリース： 2017-02-15 13:41:35

オリジナル

1482 人が閲覧しました

Triangle

CSS を書いていたとき、私は背景画像の使用に慣れていて、CSS 自体が三角形などの多くの単純な基本形状を実際に実装できることを無視していました:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

ログイン後にコピー

レンダリング:

css 实现各种基本图形

なぜ qijie は幅が広いのだろうか高さは0ですが三角形は表示できますか？通常の境界線は 4 つの直線のように見えますが、実際はそうではありません。三角形のコードを変更して、その 2 つの辺を例として表示します。！

では、他にどのような形状を作成できるでしょうか (次のコードは CSS の形状から取得したものです)。

Circle css 实现各种基本图形

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

ログイン後にコピー

は主に border-radius 属性を使用して長方形の角を丸くします。値には長さ (px) またはパーセンテージを指定できます。たとえば、この例では、50% は 水平角の半径 = width*50%、垂直角の半径 = height*50% を意味します。したがって、直接書いても 100px と同等です。

平行線

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

ログイン後にコピー

transform を使用して、次のように特性を傾けます: css 实现各种基本图形

x軸方向(水平右)に160度傾ける: 長方形の右側が反時計回りに160度回転すると想像できます(90度回転すると4つの辺が一致して図形が消えます) ; 回転が 180°を超えると 90°を超えて回転すると、円を描くように回転します)
border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。
平行四边形
```
#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}
```
ログイン後にコピー
ログイン後にコピー
利用 transform 倾斜特性如下：
- 向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）
- 向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。
五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：
```
  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;
```
ログイン後にコピー
ログイン後にコピー
通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border は y 軸方向 (水平下方向) に傾きます。これをベースとして想像できます。時計回りに回転する長方形。

五角形今度は五角形の描き方を見てみましょう⭐️?五芒星は 3 つの二等辺三角形で構成されているように見えます。

三角形の3つの角は36°、36°、108°です。このとき、五芒星を描くことは三角形を3つ描くことと同じです。記事の冒頭で述べた方法では、角度が固定された二等辺三角形しか描画できません。 border を注意深く調べると、以下に示すように、角度は実際に制御可能です。

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

ログイン後にコピー

css はさまざまな基本グラフィックを実装します css 实现各种基本图形

境界線に異なる長さを設定すると、境界線の形状: 上の図の赤い三角形を例に挙げます。その基線の長さは、高校で学習したコサイン定理から、border-left + border-right になります。三角形と任意の辺の長さによって三角形の形が決まります。したがって、理論的には、p と 3 つの border の長さを制御することで、さまざまなサイズの三角形を実現することが可能です。ある程度練習すると、整数値を取得するのが難しいため、この方法で正五角形を描くことはほとんど不可能になります。

元の記事のコードは次のとおりです (

元の著者がこれらの境界線の幅をどのように計算したかに驚きました

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

ログイン後にコピー

その他の興味深いグラフィック

ダイヤモンド

css 实现各种基本图形台形と三角形を組み合わせたもの

ビーンマンを食べる

円、ダイアログボックスの右側を隠す

三角形、角丸長方形を追加 css 实现各种基本图形

🎜🎜三角形🎜🎜🎜🎜 CSSを書くとき、私はCSS 自体が三角形などの多くの単純な基本グラフィックスを実際に実現できるという事実を無視して、背景の Figure を使用することに慣れています: 🎜

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

ログイン後にコピー

🎜Rendering: 🎜🎜🎜🎜

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

ログイン後にコピー

效果图：

css 实现各种基本图形

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

ログイン後にコピー

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

ログイン後にコピー

利用 transform 倾斜特性如下：

向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）
向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

css 实现各种基本图形

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

ログイン後にコピー

css 实现各种基本图形

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

ログイン後にコピー