css小三角提示資訊

阿新 • • 發佈：2019-01-17

實現效果如下：

不帶邊框的效果

帶邊框的效果

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>  
       回覆內容<br/>  
       回覆內容
    </div>  
    <div class="entry">  
        <div class="entry-trangle-right"><!--本Div只來實現三角形，無其他作用--></div>  
        回覆內容<br/>  
        回覆內容
    </div>  
    <div class="entry">  
        <div class="entry-trangle-top"><!--本Div只來實現三角形，無其他作用--></div>  
        回覆內容<br/>  
        回覆內容 
    </div>  
    <div class="entry">  
        <div class="entry-trangle-bottom"><!--本Div只來實現三角形，無其他作用--></div>  
        回覆內容<br/>  
        回覆內容
    </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小三角提示資訊

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

純CSS實現小三角提示資訊

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

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

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

純CSS實現提示框小三角

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

用css偽類實現提示對話方塊的小三角，哈哈！

html,body { margin: 0; width: 100%; height: 100%; } .box { position: relative; box-sizing: border-box; width: 500px; height: 500px; padding-top: 60px; bac

純css寫帶小三角對話框

height 代碼有一個 right 元素 src ive after image 在實際樣式中經常會遇到要寫類似對話框的樣式，而這種樣式往往會有一個小三角，如下所示：那麽如何用css寫出來呢，其實很簡單，先讓父元素相對定位，然後運用css的偽類before或afte

CSS小提示

註意修改屏幕 https map 這也 city 方式 sat 1、推薦使用HSLA而不是RGBA來產生半透明的白色理由：HSLA的字符長度更短，敲起來更快。重復度更低。 RGBA 語法：rgba(0-255,0-255,0-255,0-1) 示例：50%透明度的黑

小三角帶邊框帶陰影的div——css實現效果

第一種情況：帶邊框的小三角乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題

如何使用CSS畫一個小三角圖示

如何用css寫前端開發中常用的專案符號小三角呢？其實很簡單 HTML程式碼： <div class="sanjiao"></div> CSS程式碼： .sanjiao { width: 0; height: 0; overflow: hidde

CSS border製作小三角形狀及應用（相容IE6）

http://caibaojian.com/css-border-triangle.html 原理 css盒模型一個盒子包括: margin+border+padding+content – 上下左右邊框交界處出呈現平滑的斜線. 利用這個特點, 通過設定不同的

CSS實現小三角

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

純css實現小三角

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

css 實現邊框小三角

帶有邊框的三角形如何實現呢這種就相當於兩個絕對定位的無邊框三角形疊加在一起為了程式碼簡潔在非ie6下采用:before和after偽類，ie6下用樣式名來實現，程式碼 1.dom元素 <div class="box sanjiao_border"&g

CSS建立三角形（小三角）的幾種方法

你可以在很多地方看到三角形（小三角）：tooltips提示框、下拉選單、甚至在loading載入動畫裡。不管你喜歡還是不喜歡，這些小元素對各UI元素之間的聯絡關係式很重要的。有一些不同的方法來設計並製作一個三角形，在本文中，我將介紹：編碼圖片假如

純css三角提示框，兼容IE8

ble nor 兼容 ima tab osi after splay table 利用border屬性實現 .messageBox{ position: relative; width: 240px;

Echarts tooltip 自定義 css 樣式帶小三角的背景樣式

var geoCoordMap = { '上海': [121.4648,31.2891], '東莞': [113.8953,22.901], '東營': [118.7073,37.5513], '中山': [113.4229,22.478],

【CSS】CSS畫矩形、圓、半圓、弧形、半圓、小三角、疑問框

在網頁中，經常會用到各種Icon，如果老是麻煩設計獅畫出來不免有些不好意思，所以有時候我們也可以用CSS寫出各種簡單的形狀，一來可以減輕他們的負擔，二來也可以使用CSS替代圖片，提高載入速度。在網頁中，結合CSS能畫出來的最基本的形狀就是矩形，所以，我們可以在矩形的基礎上

CSS編寫下拉框對應的小三角

昨天在看一個網站的原始碼時看到了一個編寫下拉框對應的那個小三角的一個寫法，是自己之前沒有接觸過的，在這裡記錄一下： <style> i{ display:block; width:0; height:0; borde

css小細節羅列

step end ext title images 半徑 tran meta 需求有空時候把一些常見可能不是每個人都知道的css小細節總結了下，共勉。 1.line-height 眾多周知，line-height是行高的意思，我們時常會使用類似line-height:

css 小常識

con indent 列表屬性 mar lock 通過小圖標 height 最大一、vertical-align可以采用負值（正/負值根據基線上下移動），也可以采用百分比值，而這個百分比值不是相對於字體大小或者其他什麽屬性計算的，而是相對於line-height計算的。

css小三角提示資訊

相關推薦