CSS を使用してさまざまな幾何学的形状効果を実現する方法_html/css

CSS を使用してさまざまな幾何学的形状効果を実現する方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:40:55

オリジナル

1501 人が閲覧しました

CSS を使用してさまざまな幾何学的形状効果を実現する方法:
推奨事項: コードをできるだけ手書きすることで、学習の効率と深さを効果的に向上させることができます。
CSS には、ページを美しくするための強力な機能があることは誰もが知っています。CSS のバージョンが向上するにつれて、その機能はますます強力になります。ここでは、CSS を使用してさまざまな幾何学的な効果を実現する方法について簡単に紹介します。
1. 正方形の実現:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:100px;  height:100px;  background-color:green;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

2. 長方形の実現:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:150px;  height:100px;  background-color:green;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

3. 円の実現:
IE8 および IE8 未満のブラウザはサポートしていません。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:100px;  height:100px;  background:green;  -moz-border-radius:50px;  -webkit-border-radius:50px;  border-radius:50px;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

4. 楕円形の実装:
IE8 および IE8 以下のブラウザはサポートしていません。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:200px;  height:100px;  background:green;  -moz-border-radius:100px / 50px;  -webkit-border-radius:100px / 50px;  border-radius:100px / 50px;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

5. 三角形の実装:
次のコードは、実際のニーズに応じて他の方向の角度の色を白に設定し、特定の方向の三角形を実現できます。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:0px;  height:0px;  border-left:100px solid green;  border-right:100px solid black;  border-bottom:100px solid red;  border-top:100px solid blue;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

6. Parallelogram:
IE8 および IE8 以下のブラウザはサポートしていません。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:150px;  height:100px;  margin-left:20px;  -webkit-transform: skew(20deg);  -moz-transform: skew(20deg);  -o-transform: skew(20deg);  background:green;}</style></head><body><div class="mytest"></div></body></html>

ログイン後にコピー

7. 卵型:
IE8 および IE8 以下のブラウザはサポートされていません。 ... .softwhy.com/