ホームページ > 記事 > ウェブフロントエンド > CSS を使用して三角形効果を実現する方法_html/css_WEB-ITnose
CSS を使用して三角形効果を実現する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:31:40953ブラウズ
CSS を使用して三角形の効果を実現する方法:
推奨事項: できる限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
時々、いくつかの長方形のどこかに三角形の効果が現れることがよくありますが、これは非常に魔法のように感じられます。もちろん、背景画像を使用しない場合の効果について簡単に紹介します。コードは次のとおりです。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{ width:300px; height:100px; margin:40px auto; background-color:green; position:relative;}.square{ width:0px; height:0px; border-bottom:10px solid white; border-left:10px solid white; border-right:10px solid green; border-top:10px solid green; position:absolute; left:-20px; top:10px;}</style></head><body><div class="parent"> <div class="square"></div></div></body></html> 原理は非常に単純です。おそらく上記のコードでは十分に明らかではないので、一目でわかるように次のコード例を見てください。
すごいです
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4650
詳細については、以下を参照してください: http://www.softwhy.com/divcss /
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。