CSS_html/css_WEB-ITnose で実装された矢印付きの四角形効果のコード例-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS_html/css_WEB-ITnose で実装された矢印付きの四角形効果のコード例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

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 までご連絡ください。