CSS教學－純CSS打造箭頭對話框效果:－線上遊戲排行榜2013/2014,進擊的巨人線上看,candy crush saga外掛,正妹寫真三圍

Blogtrottr

♣梅問題‧教學網【Minwt】♣

Kindle Book Deals

We find the best deals on best-selling Kindle books for you. Just tell us which genres you love and we'll do the rest. The best part? It's completely free!

From our sponsors

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

Aug 29th 2013, 01:30, by admin

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

箭頭對話框效果：

使用語法：CSS2
支援平台：IE8.0+、Chrome、Firefox、Safari、Oprea

首先，先定義一個邊框的樣式與色彩。

由於邊框是由內向外畫，且會看到個邊的接角，正好都是45度角。

接著再將寬、高設成0。

有沒有點感覺啦!

這時再把其它邊的顏色改成透明。

鏘~鏘~三角形出現啦!而有了這概念後，就可以開始來製作對話框了。

CSS樣式設定：
放在<head>.....</head>之間：

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

<style type="text/css">
.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;
}
 
</style>

HTML：
放在<body>.....</body>之間：

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<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教學－仿Photoshop CC圖層樣式CSS3線上產生器

CSS教學－CSS3 線上漸層語法產生器

CSS教學－「CSS3動畫」Ceaser線上動畫產生器

《MinifyMe》橫跨 Win / MAC 平台CSS壓縮軟體

標籤： css2教學, css2畫三角形, css2範例, css對話框
引用網址： ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝。
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

Massacres That Matter - 'Responsibility To Protect' In Egypt, Libya And Syria
'A Political Ploy'? The Guardian Editors Swallow US Claims On Syrian WMD
'Limited But Persuasive' Evidence - Syria, Sarin, Libya, Lies
Emergency protest: No attack on Syria - Downing Street, London, UK 5-7pm, Wednesday 28th August

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions