CSS教學-純CSS打造箭頭對話框效果

梅問題-CSS教學-CSS製作箭頭對話框效果
  有在使用Facebook的朋友,應該會發現到,自從Facebook將條列式改成時間軸的架構後,每當發表新訊息時,每個訊息都會像對框話的形式來呈現,雖然說這不是什麼新技術,但先前梅干都是將那對話框的,三角形製作成圖檔,再將它定位顯示到該顯示的任置,雖然說沒什麼問題,但若中間突然修改的顏色或邊框時,這下就得重新再繪製一次,因此梅干便在想,或許可用Html5來繪製那三角形,如此一來就可省去,每當色彩改變時,重製的麻煩,但就目前Html5的部分,使用上還是相當的受限,因此梅干爬了一些文章,找到一個相當棒的作法,竟然直接用CSS的語法就可實作出來,這還真是讓梅干想都沒想到,竟然可以這樣子用,而梅干也花了點時間,將對話框四個上向箭頭的CSS給設定好了,因此各位可以直接套用喔!

箭頭對話框效果:
使用語法:CSS2
支援平台:IE8.0+、Chrome、Firefox、Safari、Oprea

首先,先定義一個邊框的樣式與色彩。
梅問題-CSS教學-CSS製作箭頭對話框效果
由於邊框是由內向外畫,且會看到個邊的接角,正好都是45度角。
梅問題-CSS教學-CSS製作箭頭對話框效果
接著再將寬、高設成0。
梅問題-CSS教學-CSS製作箭頭對話框效果
有沒有點感覺啦!
梅問題-CSS教學-CSS製作箭頭對話框效果
這時再把其它邊的顏色改成透明。
梅問題-CSS教學-CSS製作箭頭對話框效果
鏘~鏘~三角形出現啦!而有了這概念後,就可以開始來製作對話框了。
梅問題-CSS教學-CSS製作箭頭對話框效果
CSS樣式設定:
放在<head>.....</head>之間:
.mwt_border{
	width:250px;
	height:90px;
	text-align:center;
	background:#fff;
	position:relative;
	border: solid 1px #333;
	margin:30px;
	padding:30px;
}
/*箭頭右*/
.mwt_border .arrow_r_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent transparent #333;
	position:absolute;
	top:20%;
	right:-30px;
}
/*箭頭右-邊框*/
.mwt_border .arrow_r_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent transparent #fff;
	position:absolute;
	top:20%;
	right:-29px;
}

/*箭頭左*/
.mwt_border .arrow_l_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent #333 transparent  transparent ;
	position:absolute;
	top:20%;
	left:-30px;
}
/*箭頭左-邊框*/
.mwt_border .arrow_l_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent #fff transparent transparent ;
	position:absolute;
	top:20%;
	left:-29px;
}

/*箭頭上*/
.mwt_border .arrow_t_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #333 transparent ;
	position:absolute;
	top:-30px;
	left:40px;
}
/*箭頭上-邊框*/
.mwt_border .arrow_t_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #fff transparent ;
	position:absolute;
	top:-29px;
	left:40px;
}

/*箭頭下*/
.mwt_border .arrow_b_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:#333 transparent transparent transparent ;
	position:absolute;
	bottom:-30px;
	right:50px;
}
/*箭頭下-邊框*/
.mwt_border .arrow_b_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:#fff transparent transparent transparent ;
	position:absolute;
	bottom:-29px;
	right:50px;
}



HTML:
放在<body>.....</body>之間:
<div class="mwt_border">
	<span class="arrow_t_int"></span>
    <span class="arrow_t_out"></span>
	CSS製作對話框效果-箭頭上
</div>

<div class="mwt_border">
	<span class="arrow_r_int"></span>
    <span class="arrow_r_out"></span>
	CSS製作對話框效果-箭頭右
</div>

<div class="mwt_border">
	<span class="arrow_b_int"></span>
    <span class="arrow_b_out"></span>
	CSS製作對話框效果-箭頭下
</div>


<div class="mwt_border">
	<span class="arrow_l_int"></span>
    <span class="arrow_l_out"></span>
	CSS製作對話框效果-箭頭左
</div>

完成就會看到,分別有上、右、下、左四個方向的對話框喔!
梅問題-CSS教學-CSS製作箭頭對話框效果
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    henry 說道:

    可結合WP的留言系統?

    回應:
    可以的,可用於任何平台上
  • 第1梅
    阿卡捏 說道:

    梅干
    不好意思,
    我想請問一下這個對話框的CSS
    原本定義出來的三角形箭頭不是實心色塊嗎?
    為什麼放入DIV以後,會有融為一體的對話框線框效果呢?

    非常感謝!!

    回應:
    喔!那是暲眼法,
    二個都填入色彩,只是一個比較大,來產生出線框的效果