他の図形

これまで我々はいくつかを通り抜けたbasic CSS shapes , and triangles in CSS .
今日、我々は若干の涼しい他の形に集中しています.
この記事でカバーされる図形は次のとおりです.

Trapezoid in CSS

Parallelogram in CSS

Hexagon in CSS

Egg in CSS

CSSの台形

我々が今日見ている最初の形は、台形です.基本的にワープ長方形です.
そして、我々は実際に我々が見たように境界線を活用することによってこれを作成することができますCSS Triangles .

.trapezoid {
  border-bottom: 100px solid #3e92cc;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 150px;
}

その結果、次のような結果が得られます.

平行四辺形

平行四辺形の上に、もう一つの長方形ですが、特定の方法を歪んでください、そして、それはまさにこの形をつくる方法です.

.parallelogram {
  width: 200px;
  height: 100px;
  transform: skew(20deg);
  background: #3e92cc;
}

これにより次の結果が得られる.

CSSの六角形

もう一つのクールな形は、六角形です.つの尖った要素、そしてそれは簡単に聞こえるが、それはそれにかなりの挑戦をしています.
この例では、矩形を使用し、CSS擬似要素を使用して上部と下部の三角形を追加します.

.hexagon {
  width: 90px;
  height: 50px;
  background: #3e92cc;
  position: relative;
}
.hexagon::before {
  content: '';
  position: absolute;
  top: -25px;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 25px solid #3e92cc;
}
.hexagon::after {
  content: '';
  position: absolute;
  bottom: -25px;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 25px solid #3e92cc;
}

そして、それは私たちにこの結果を与えます:

CSSでエッグ

そして、私のお気に入りの1つ、卵!
楕円を使用するように作成するのは簡単ですが、少し調整します.

.egg {
  display: block;
  width: 100px;
  height: 130px;
  background-color: #3e92cc;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

そして、我々はこのクールな探している卵を得ます.

CSS図形のデモンストレーション

いつものように、次のcodepenでこれらの図形を試すことができますいくつかの調整をしようとすると何が起こるかを参照してください.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or