ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose で実装された矢印付きの四角形効果のコード例
CSS_html/css_WEB-ITnose で実装された矢印付きの四角形効果のコード例
- WBOYオリジナル
- 2016-06-24 11:31:101725ブラウズ
CSS で実装された矢印付きの四角形効果のサンプルコード:
矢印付きの四角形効果は現在非常に広く使用されています。たとえば、危険な情報は、もちろん、実装原理は私たちのものとは異なります。もちろん、Web ページにはポップアップ情報プロンプトなどのアプリケーションがあり、矢印を方向プロンプトとして使用できます。コード例で簡単に紹介します。
コード例は次のとおりです。
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>三种纯CSS实现三角形的方法</title> <style type="text/css"> .message-box { position:relative; width:240px; height:60px; line-height:60px; border:1px solid #000; text-align:center; color:#0C7823; } .triangle-border { position:absolute; left:100px; overflow:hidden; width:0; height:0; border-width:10px; border-style:none dashed solid dashed; } .tb-border { top:-10px; border-color:#000 transparent #000 transparent; } .tb-background { top:-9px; border-color:transparent transparent #fff transparent; }</style> </head> <body> <div class="message-box"> <span>border属性实现</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div> </div> </body> </html>
上記のコードは、矢印付きの長方形のエフェクトを実装します。以下は、このエフェクトの実装プロセスの概要です。
1. 実装原理:
原理は非常に単純です。つまり、2 つの div の境界線を設定し、2 つの div をオーバーラップさせ、1px の差でそれらの先頭の属性値を使用します。わかりやすくするために、この効果を理解するには、まずコードを見てください:
<!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">div { width:0px; height:0px; border-bottom:50px solid green; border-left:50px solid blue; border-right:50px solid red; border-top:none;}</style></head><body><div></div></body></html>
上の緑色の三角形は、表示したい三角形の効果です。細い境界線を持つ三角形なので、このような三角形を使用して合計します。それが重なって、位置の違いを利用して境界線効果を実現します。原理はほぼ同じで、もちろんそれを覆う三角形の背景は白です。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=9801
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。