純CSS實現小三角提示資訊

阿新 • • 發佈：2019-02-12

實現後的效果如下：

不帶邊框的

帶邊框的

在此提供兩種實現方式：

1、不帶邊框的

css：

*{margin:0;padding:0;}
        body{
            background:#666;
            font:14px/20px "Microsoft YaHei";
            text-align: left;
        }
        .entry{
            position: relative;
            margin-left: 20px;
            margin-top:20px;
            width:200px;
            background:#fff;
            padding:10px;
            /*設定圓角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        /*左三角*/
        .entry-trangle-left{
            position:absolute;
            bottom:15px;
            left:-10px;
            width:0;
            height:0;
            border-top:15px solid transparent;
            border-bottom:15px solid transparent;
            border-right:15px solid #fff;
        }
        /*右三角*/
        .entry-trangle-right{
            position:absolute;
            top:15px;
            right:-10px;
            width:0;
            height:0;
            border-top:15px solid transparent;
            border-bottom:15px solid transparent;
            border-left:15px solid #fff;
        }
        /*上三角*/
        .entry-trangle-top{
            position:absolute;
            top:-10px;
            left:20px;
            width:0;
            height:0;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            border-bottom:15px solid #fff;
        }
        /*下三角*/
        .entry-trangle-bottom{
            position:absolute;
            bottom:-10px;
            left:20px;
            width:0;
            height:0;
            border-left:15px solid transparent;
            border-right:15px solid transparent;
            border-top:15px solid #fff;
        }

html：

<div class="entry">
    <div class="entry-trangle-left"><!--本Div只來實現三角形，無其他作用--></div>
    hello，我出生了<br/>
    hello，我出生了
</div>
<div class="entry">
    <div class="entry-trangle-right"><!--本Div只來實現三角形，無其他作用--></div>
    hello，我出生了<br/>
    hello，我出生了
</div>
<div class="entry">
    <div class="entry-trangle-top"><!--本Div只來實現三角形，無其他作用--></div>
    hello，我出生了<br/>
    hello，我出生了
</div>
<div class="entry">
    <div class="entry-trangle-bottom"><!--本Div只來實現三角形，無其他作用--></div>
    hello，我出生了<br/>
    hello，我出生了
</div>

2、帶邊框的

css：

 /*上三角*/
        .tag-top{
             margin: 20px;
             padding: 5px;
             width:300px;
             height:60px;
             border:2px solid #f99;
             position:relative;
             background-color:#FFF;
             /*設定圓角*/
             -webkit-border-radius:5px;
             -moz-border-radius:5px;
             border-radius:5px;
         }
        .tag-top:before,.tag-top:after{
            content:"";
            display:block;
            border-width:15px;
            position:absolute;
            top:-30px;
            left:100px;
            border-style:solid dashed dashed solid;
            border-color:transparent  transparent #f99 transparent;
            font-size:0;
            line-height:0;
        }
        .tag-top:after{
            top:-27px;
            border-color: transparent transparent #FFF transparent;
        }
        /*下三角*/
        .tag-bottom{
            margin: 20px;
            padding: 5px;
            width:300px;
            height:60px;
            border:2px solid #f99;
            position:relative;
            background-color:#FFF;
            /*設定圓角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .tag-bottom:before,.tag-bottom:after{
            content:"";
            display:block;
            border-width:15px;
            position:absolute;
            bottom:-30px;
            left:100px;
            border-style:solid dashed dashed solid;
            border-color:#f99 transparent  transparent transparent;
            font-size:0;
            line-height:0;
        }
        .tag-bottom:after{
            bottom:-27px;
            border-color: #FFF transparent transparent transparent;
        }
        /*左三角*/
        .tag-left{
            margin: 20px;
            padding: 5px;
            width:300px;
            height:60px;
            border:2px solid #f99;
            position:relative;
            background-color:#FFF;
            /*設定圓角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .tag-left:before,.tag-left:after{
            content:"";
            display:block;
            border-width:15px;
            position:absolute;
            left:-30px;
            top:20px;
            border-style:dashed solid solid dashed;
            border-color:transparent #f99 transparent  transparent;
            font-size:0;
            line-height:0;
        }
        .tag-left:after{
            left:-27px;
            border-color:transparent #FFF transparent transparent ;
        }
        .tag-right{
            margin: 20px;
            padding: 5px;
            width:300px;
            height:60px;
            border:2px solid #f99;
            position:relative;
            background-color:#FFF;
            /*設定圓角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .tag-right:before,.tag-right:after{
            content:"";
            display:block;
            border-width:15px;
            position:absolute;
            right:-30px;
            top:20px;
            border-style:dashed solid solid dashed;
            border-color:transparent transparent transparent #f99;
            font-size:0;
            line-height:0;
        }
        .tag-right:after{
            right:-27px;
            border-color:transparent transparent  transparent #FFF ;
        }

html：

<div class="tag-top">
    css3氣泡框
</div>
<div class="tag-bottom">
    css3氣泡框
</div>
<div class="tag-left">
    css3氣泡框
</div>
<div class="tag-right">
    css3氣泡框
</div>

此外，如若，設定邊框的顏色與背景色相同，也能得到沒有邊框的：

css：

 .tag-right-noborder{
            margin: 20px;
            padding: 5px;
            width:300px;
            height:60px;
            border:2px solid #FFF;
            position:relative;
            background-color:#FFF;
            /*設定圓角*/
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
        .tag-right-noborder:before,.tag-right-noborder:after{
            content:"";
            display:block;
            border-width:15px;
            position:absolute;
            right:-30px;
            top:20px;
            border-style:dashed solid solid dashed;
            border-color:transparent transparent transparent #FFF;
            font-size:0;
            line-height:0;
        }
        .tag-right-noborder:after{
            right:-27px;
            border-color:transparent transparent  transparent #FFF ;
        }

html：

<div class="tag-right-noborder">
    css3氣泡框
</div>

實現後的效果：

如有疑問，可聯絡：

QQ：1004740957

Email：[email protected]

純CSS實現小三角提示資訊

實現後的效果如下：不帶邊框的帶邊框的在此提供兩種實現方式： 1、不帶邊框的 css： *{margin:0;padding:0;} body{ background:#666; font:14px/2

純css實現小三角

<pre name="code" class="css">/*向上*/ .top{ width:0px; height:0px; /*關鍵*/ border-left:5px solid #FFFFFF; border

css小三角提示資訊

實現效果如下：不帶邊框的效果帶邊框的效果1、不帶邊框css:*{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsof

CSS實現小三角

原理盒子寬高為0，單獨設定border寬度，然後上右下左，根據需要選擇三角形的方向，比如選向上箭頭，其他右下左方向設定為transparent。 .down{ width:0; height:0; overflow:hidden; fon

純CSS實現帶小三角的提示框

最終效果大概如下：主要實現的思路：將提示框分為兩個部分，一個是方形的主題，一個是鏤空的三角形。所以html大體的結構應該如下： <div class="tips"> &

純CSS實現提示框小三角

注：IE6不支援邊框transparent，當設定成透明時顯示為黑色。而當border-style為dotted或dashed時，點線與虛線均以邊框寬度為基準，點線長度必須是其寬度的3倍以上（height>=border-width*3），虛線寬長度必須是其寬度的5倍

純css實現三角原理，相容IE

css實現三角形的原理是：當元素的寬高為0，邊框(border)不為0時，四個角邊框交界重疊處分45度角平分。如果4種顏色只保留一種顏色，餘下3種顏色設定為透明（或者設定為和背景色相同的顏色），就出現一個小三角了。只保留上面的顏色，如下圖： disp

純CSS實現聊天框小尖角、氣泡效果

經常看到這樣的尖角，以前不懂，以為都是用圖片做出來的，後來驚奇的發現，原來很多都是用CSS做出來的，既美觀又節省資源，真是兩全其美啊！那麼，用CSS怎麼實現這種效果呢？首先，來寫一個簡單的程式碼： <div class="arrow"></div&g

微信小程式 --- CSS實現仿網易雲音樂播放介面效果（黑膠唱片與唱針純CSS實現）

下面程式碼的效果是網易雲音樂唱針和黑膠唱片的CSS效果實現方式，播放等並沒貼出來實現效果的範圍動態圖效果預覽： stylusW,panW是獲取系統寬度計算後的引數 w

純css實現select下拉框並排顯示

code 同時 eight spl one 背景色不起作用表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

純SQL實現小算法（輔助決策）_ 計算商品評分、及時補貨

mysql分別把計算各自的 1、點擊量/點擊量均值 2、銷售量/銷售量均值兩者相加，可以得到一個簡單評分又有問題了，豬肉的評分不應該比五花肉多。因此我們要加入簡單的權重，譬如點擊量評分占30%。銷售量評分占70%select p_type,p_name, (p_view/view_avg)

純CSS實現氣泡框

set .org head left 一個 pos radi margin orange 效果圖如下：源碼： <!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en" "http://

使用純css實現波浪效果

波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分

通過純css實現圖片居中的多種實現方式

splay add pad src 純css webkit web center -c html結構： 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">

【CSS3】選擇器-純css實現輪播

ica 焦點集合 meta 表示 style disable 設置 :active CSS選擇器：基本選擇器：通配符選擇器：*；元素選擇器：元素標簽； class選擇器：相當於身份證上的名稱； id選擇器：相當於身份證號（唯一性）；多元素組合選擇器

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享分享圖片 gin pos pic ble 居中實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

純css實現打字效果

idt strong htm rap 混合實現有時 append com 概述很早以前就在別人的博客上面看到打字動畫了，覺得非常炫酷，以為是用js做的，找了半天也沒找到js在哪裏。今天看《css揭秘》，碰巧看到書上打字動畫的實現了，而且是純css實現的！我參考這本書把

純css實現

pan mas class key ani splay 100% ear document 實現此效果 .colorful { background-image: linear-gradient(to right, red, orange, yellow, green, y

純CSS實現垂直居中的幾種方法

right lin 兼容 bar 實現 syntax info pro ems 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方法1：

純css實現二級導航

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>企業搜尋頁面</title> <style>

純CSS實現小三角提示資訊

相關推薦