CSS：グラフィックスは私にあなたをできるように、コレクションをレンダリング！

以下これらの単純なグラフィックは、純粋なCSSスタイルプラス私は導入前に多くのことを達成し、達成するためのHTMLタグであるか、あなたは知っているが、私はあなたのいくつかは見ていないと信じています。

1.広場

次のようにリアルタイムレンダリングは次のとおりです。

関連CSSコード：

#square {
  width: 100px; height: 100px;
  background: red;
}

2.長方形

効果：

関連CSSコード：

#rectangle {
  width: 200px; height: 100px;
  background: red;
}

web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

3.完全な円

丸みを帯びた角は、これを達成すると、次のように明らかな効果があります。

関連CSSコード：

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

4.楕円

結果は以下の通りであります：

パーフェクトサークルは、関連するCSSコードのサイズに比べて少し異なります。

#oval {
  width: 200px; height: 100px;
  background: red;
  border-radius: 50%;
}

5. 向上三角

結果は以下の通りであります：

関連CSSコード：

#triangle-up {
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

6.ダウン三角形

結果は以下の通りであります：

関連CSSコード：

#triangle-down {
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

7.左方向の三角形

結果は以下の通りであります：

関連CSSコード：

#triangle-left {
  width: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

8.右方向三角形

結果は以下の通りであります：

関連CSSコード：

#triangle-right {
  width: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

9.左上の三角形

結果は以下の通りであります：

関連CSSコード：

#triangle-topleft {
  width: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

斜めの直線勾配は45°を達成するために使用することができますが、互換性は使用されませんborder良い達成します。

10.右上三角

結果は以下の通りであります：

関連CSSコード：

#triangle-topright {
  width: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

斜めの直線勾配は45°を達成するために使用することができますが、互換性は使用されませんborder良い達成します。

11.三角形の図形の左下隅

結果は以下の通りであります：

関連CSSコード：

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

また、グラデーション描画を使用することができます。

12.三角形の図形の右下隅

結果は以下の通りであります：

関連CSSコード：

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

また、グラデーション描画を使用することができます。

13湾曲した尾矢印

結果は以下の通りであります：

完全なCSSコード：

#curvedarrow {
  position: relative;
  width: 0;
  border-top: 90px solid transparent;
  border-right: 90px solid red;
  transform: rotate(10deg) translateX(100%);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 30px solid red;
  border-radius: 200px 0 0 0;
  top: -120px; left: -90px;
  width: 120px; height: 120px;
  transform: rotate(45deg);
}

（回転を含まない）CSSのすべての値がすべてうまく10回を削減する限り、このような大規模なグラフィックの実際の使用よりも少ないです。

14.台形

結果は以下の通りであります：

関連CSSコード：

#trapezoid {
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  width: 100px;
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

15.等辺四角形

次のようにページのレンダリングは次のとおりです。

達成スキューマイター性質を変換することができます：

#parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: red;
}

ダビデの16.スター

結果は以下の通りであります：

関連CSSコード：

#star-six {
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px; left: -50px;
}

17.五芒星

結果は以下の通りであります：

五芒星の六角形、CSSコードよりもはるかに多くを達成することは困難：

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

18.ポリゴン - 五角形

結果は以下の通りであります：

関連CSSコード：

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon:before {
  content: "";
  position: absolute;
  top: -85px; left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}

もちろん、実装が最も容易にクリップパスを用いて理解されています

19.ポリゴン - 六角形

結果は以下の通りであります：

関連CSSコード：

#hexagon {
  width: 100px; height: 55px;
  background: red;
  position: relative;
}
#hexagon:before {
  content: "";
  position: absolute;
  top: -25px; left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px; left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

20.ポリゴン - 八角形

結果は以下の通りであります：

関連CSSコード：

#octagon {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#octagon:before {
  content: "";
  width: 100px;
  position: absolute;
  top: 0; left: 0;
  border-bottom: 29px solid red;
  border-left: 29px solid #fff;
  border-right: 29px solid #fff;
  box-sizing: border-box;
}
#octagon:after {
  content: "";
  width: 100px;
  position: absolute;
  bottom: 0; left: 0;
  border-top: 29px solid red;
  border-left: 29px solid #fff;
  border-right: 29px solid #fff;
  box-sizing: border-box;
} 

21.愛❥

効果後の愛の実現：

関連CSSコード：

#heart {
  position: relative;
  width: 100px; height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px; top: 0;
  width: 50px; height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

この効果は、著者であるニコラス・ギャラガー。

22.無制限

結果は以下の通りであります：

関連CSSコード：

#infinity {
  position: relative;
  width: 212px; height: 100px;
  box-sizing: content-box;
}
#infinity:before,
#infinity:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 60px;
  border: 20px solid red;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#infinity:after {
  left: auto; right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

23.菱形のボックス

結果は以下の通りであります：

関連CSSコード：

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}

24.ダイヤモンド形のシールド

結果は以下の通りであります：

関連CSSコード：

#diamond-shield {
  width: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield:after {
  content: '';
  position: absolute;
  left: -50px; top: 20px;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

25.ダイヤモンド形の箱 - 狭いです

結果は以下の通りであります：

関連CSSコード：

#diamond-narrow {
  width: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px; top: 70px;
  border: 50px solid transparent;
  border-top: 70px solid red;
}

この効果は、著者であるジョセフSILBER。

26.カットダイヤモンド - ダイヤモンド

私は彼にあなたがたくさんのお金を節約することができ、同様にCSSのガールフレンドの数行に直接書き込むための時間と結婚し、これを学びました。

貴重なCSSコード：

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  width: 50px;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}
#cut-diamond:after {
  content: "";
  position: absolute;
  top: 25px; left: -25px;
  border-style: solid;
  border-color: red transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

27.卵形

良好な結果：

実装は、それはそれで国境半径で、非常に簡単です：

#egg {
  display: block;
  width: 126px;
  height: 180px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

28パックマン

結果は以下の通りであります：

関連CSSコード：

#pacman {
  width: 0px; height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

トークバブルの鋭いポイント29

結果は以下の通りであります：

関連CSSコード：

#talkbubble {
  width: 120px; height: 80px;
  background: red;
  position: relative;
  border-radius: 10px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%; top: 26px;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}

30. 12星

結果は以下の通りであります：

関連CSSコード：

#burst-12 {
  background: red;
  width: 80px;
  height: 80px;
  position: relative;
  text-align: center;
}
#burst-12:before,
#burst-12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
#burst-12:before {
  transform: rotate(30deg);
}
#burst-12:after {
  transform: rotate(60deg);
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

この効果は、アラン・ジョンソンです。

31.八角形

結果は以下の通りであります：

関連CSSコード：

#burst-8 {
  background: red;
  width: 80px; height: 80px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
}
#burst-8:before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 80px; width: 80px;
  background: red;
  transform: rotate(135deg);
}

32.陰陽ゴシップ

結果は以下の通りであります：

関連CSSコード：

#yin-yang {
  width: 96px; height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  background: #fff;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px; height: 12px;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

33.リボンバッジ

結果は以下の通りであります：

関連CSSコード：

#badge-ribbon {
  position: relative;
  background: red;
  height: 100px; width: 100px;
  border-radius: 50px;
}
#badge-ribbon::before,
#badge-ribbon::after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px; left: -10px;
  transform: rotate(-140deg);
}
#badge-ribbon::after {
  left: auto;
  right: -10px;
  transform: rotate(140deg);
}

34.嗶哩嗶哩テレビ

結果は以下の通りであります：

関連CSSコード：

#tv {
  position: relative;
  width: 200px; height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; right: -5%; left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

35 V字型ライン

結果は以下の通りであります：

関連CSSコード：

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px; width: 200px;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 51%;
  background: red;
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  height: 100%; width: 50%;
  background: red;
  transform: skew(0deg, -6deg);
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

36.拡大鏡

結果は以下の通りであります：

関連CSSコード：

#magnifying-glass {
  font-size: 10em;
  display: inline-block;
  width: 0.4em; height: 0.4em;
  border: 0.1em solid red;
  position: relative;
  border-radius: 0.35em;
}
#magnifying-glass:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: -0.25em; bottom: -0.1em;
  border-width: 0;
  background: red;
  width: 0.35em; height: 0.08em;
  transform: rotate(45deg);
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

この実装は、ユニットがあり、非常に良いですがem実用性が非常に強いです。

曲がった37月の子供たち

子どもたちは、九州に応じて湾曲する可能性があります。

関連CSSコード：

#moon {
  width: 80px; height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

38.バナー

結果は以下の通りであります：

関連CSSコード：

#flag {
  width: 110px; height: 56px;
  padding-top: 15px;
  position: relative;
  background: red;
}
#flag:after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  border-bottom: 13px solid #fff;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
}

39.コーン

結果は以下の通りであります：

それでも丸いボーダー-radiusプロパティを使用：

#cone {
  width: 0; height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}

40.クロス

結果は以下の通りであります：

これは、ボタンとして追加、またはアイコンを追加することができます。

関連するコード：

#cross {
  background: red;
  width: 20px; height: 100px;
  position: relative;
}
#cross:after {
  background: red;
  content: "";
  width: 100px; height: 20px;
  position: absolute;
  left: -40px; top: 40px;
}

41ペダル野球の形状

結果は以下の通りであります：

関連CSSコード：

#base {
  background: red;
  display: inline-block;
  height: 55px; width: 100px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative; 
}
#base:before {
  border-bottom: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  left: 0; top: -35px;
  position: absolute;  
}

42.長い監督グラフィック

結果は以下の通りであります：

関連CSSコード：

#pointer {
  width: 200px; height: 40px;
  position: relative;
  background: red;
}
#pointer:after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
#pointer:before {
  content: "";
  position: absolute;
  right: -20px; bottom: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的

43.ロック

結果は以下の通りであります：

関連CSSコード：

#lock {
  font-size: 8px;
  position: relative;
  width: 18em; height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid red;
  width: 14em; height: 12em;
  left: 50%;
  margin-left: -7em; top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid red;
  width: 5em; height: 8em;
  border-radius: 2.5em;
  left: 50%; top: -1em;
  margin-left: -2.5em;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

---

それらは倍のCSSレンダリングのグラフィックスコレクションです。