コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

高洛峰
リリース： 2017-02-15 13:41:35
オリジナル
1534 人が閲覧しました

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 の形状から取得したものです)。

Circlecss 实现各种基本图形

.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 と同等です。

平行線

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

#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 也是等价的。

    平行四边形

    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 は y 軸方向 (水平下方向) に傾きます。これをベースとして想像できます。時計回りに回転する長方形。

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

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

三角形の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を書くとき、私は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: '';
}
ログイン後にコピー
ログイン後にコピー

其他有趣的图形

钻石

css 实现各种基本图形

通过一个梯形和一个三角形组合而成

吃豆人

css 实现各种基本图形

一个圆形，隐藏右侧边

对话框

css 实现各种基本图形

一个三角形，加一个圆角矩形

更多css 实现各种基本图形相关文章请关注PHP中文网！

関連ラベル：
css
ソース：php.cn
前の記事：CSS テスト ポイントの 1 つ、 タグ、疑似クラス 次の記事：cssでレリーフ効果を実現するサンプルコード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート