ホームページ > 記事 > ウェブフロントエンド > CSS を使用してさまざまな幾何学的形状効果を実現する方法_html/css_WEB-ITnose
CSS を使用してさまざまな幾何学的形状効果を実現する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:551442ブラウズ
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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。