css實現tooltips框的三角角標兩種方法：偽類和C3旋轉

阿新 • • 發佈：2018-12-31

這裡寫圖片描述

一、皆為邊框

第一種 Css的border取其一為三角
第二種 C3新屬性旋轉（transform:rotate(45deg);）

二、皆為陰影（採用C3旋轉）

完整程式碼整個複製即可檢視效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css實現tooltips框的三角角標</title>
    <meta charset 
="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display:inline-block;
        }
        .tooltips1,
        .tooltips2,
        .tooltips3 {
            width: 200px;
            height: 80px;
            background: #fbfbfb;
            border 
: 1px solid #d5d5d5;
            border-radius: 10px;
            margin: 50px;
            position: relative;
        }

            .tooltips1:after {
                position: absolute;
                left: -18px;
                top: 20px;
                border-left: 9px solid transparent;
                border-top 
: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid #fbfbfb;
                content: '';
            }

            .tooltips1:before {
                position: absolute;
                left: -19px;
                top: 20px;
                border-left: 9px solid transparent;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid #d5d5d5;
                content: " ";
                display: block;
                width: 0;
                height: 0;
            }

            .tooltips2:after {
                position: absolute;
                right: -18px;
                top: 20px;
                border-left: 9px solid #fbfbfb;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid transparent;
                content: '';
            }

            .tooltips2:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                right: -19px;
                top: 20px;
                border-left: 9px solid #d5d5d5;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid transparent;
            }

            .tooltips3:before {
                transform: rotate(45deg);
                content: " ";
                display: block;
                width: 10px;
                height: 10px;
                position: absolute;
                left: 20px;
                top: -6px;
                background: #fbfbfb;
                border-left: 1px solid #d5d5d5;
                border-top: 1px solid #d5d5d5;
            }

        .tooltips {
            width: 200px;
            height: 80px;
            background: #fff;
            border-radius: 10px;
            margin: 50px;
            position: relative;
            box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
            padding:10px;
        }
        .tooltips:before {
            transform: rotate(45deg);
            content: " ";
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            background: #fff;
            /*right: 30px;
            top: -5px;
            box-shadow: #d4d4d4 -1px -1px 5px;*/
        }

        .tooltips:after {
            content: " ";
            display: block;
            width: 16px;
            height: 7px;
            position: absolute;
            /*right: 27px;
            top: 0px;*/
            background: #fff;
        }   
        /*top*/
        .tooltips.top:before{
            right: 30px;
            top: -5px;
            box-shadow: #d4d4d4 -1px -1px 5px;
        }
        .tooltips.top:after{
            right: 27px;
            top: 0px;
        }
        /*bottom*/
        .tooltips.bottom:before{
            right: 30px;
            bottom: -5px;
            box-shadow: #d4d4d4 1px 1px 5px;
        }
        .tooltips.bottom:after{
            right: 27px;
            bottom: 0px;
        }
        /*left*/
        .tooltips.left:before{
            left: -5px;
            top: 20px;
            box-shadow: #d4d4d4  -1px 1px 5px;
        }
        .tooltips.left:after{
            width: 7px;
            height: 16px;
            left: 0;
            top: 17px;
        }
        /*right*/
        .tooltips.right:before{
            right: -5px;
            top: 20px;
            box-shadow: #d4d4d4 1px -1px 5px;
        }
        .tooltips.right:after{
            width: 7px;
            height: 16px;
            right: 0;
            top: 17px;
        }
    </style>
</head>
<body>

    <div class="tooltips1"></div>
    <div class="tooltips2"></div>
    <div class="tooltips3"></div>

    <br />

    <div class="tooltips top">人之初 性本善 性相近 習相遠</div>
    <div class="tooltips bottom">人之初 性本善 性相近 習相遠</div>
    <div class="tooltips left">人之初 性本善 性相近 習相遠</div>
    <div class="tooltips right">人之初 性本善 性相近 習相遠</div>
</body>
</html>

css實現tooltips框的三角角標兩種方法：偽類和C3旋轉

一、皆為邊框第一種 Css的border取其一為三角第二種 C3新屬性旋轉（transform:rotate(45deg);）二、皆為陰影（採用C3旋轉）完整程式碼整個複製

實現多執行緒得兩種方法：Thread類整合和Runnable介面實現

建立執行緒的第一種方式：繼承Thread類。步驟： 1，定義類繼承Thread。 2，複寫Thread類中的run方法。目的：將自定義程式碼儲存在run方法。讓執行緒執行。//run();僅僅是物件呼叫方法。而執行緒建立了，並沒有執行。 3，呼叫執行緒的start方法，該方法兩個作用：啟動執行緒，呼

自制按鈕圖標的兩種方法： image sprite和svg字體文件

輸出圖標 int uil pac 設置定制方法 ets 用image sprite和svg字體文件這兩種方法，都能夠極大地減少小圖形文件的數量，從而減少服務器請求和帶寬需求。提高網頁的響應速度。一、建立SVG字體文件 iconmoon 是一個在線工具，可以上傳

Vue-詳解設定路由導航的兩種方法：router-link和router.push

轉自：http://www.cnblogs.com/superlizhao/p/8527317.html 一、<router-link :to="...">　　to裡的值可以是一個字串路徑，或者一個描述地址的物件。例如： // 字串 <router

SpringBoot中使用Spring Data Jpa 實現簡單的動態查詢的兩種方法

ppr eat value table 得到 blog .net ride integer 首先謝謝大佬的簡書文章：http://www.jianshu.com/p/45ad65690e33# 這篇文章中講的是spring中使用spring data jpa，使用了xml配

javascript 實現字符串反轉的兩種方法

class ava javascrip 遍歷 style 實現數組 spa -1 第一種方法:利用數組方法 //先split將字串變成單字數組，然後reverse()反轉，然後將數組拼接回字串 var str = "abcdef"; str.split("").rev

CSS實現下拉菜單的幾種方法

ansi display ora ble 下拉技術 body round too PS:轉自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一種:display:none和display:block切換 1 &l

用兩種方法（遞歸和DP）實現了青蛙跳臺階

col rac color 題目方法 pan ret 提高 page 做了這道題目： https://www.nowcoder.net/practice/8c82a5b80378478f9484d87d1c5f12a4?tpId=13&tqId=11161&

執行緒池實現執行緒的建立的兩種方法

package cn.itcast.demo5; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; /* JDK1.5新特性,實現執行緒池程式使用

SQLserver 兩表聯查及三表聯查兩種方法

列表內容 –合同表顯示跟使用者表聯查 SELECT * FROM dbo.Contract SELECT h.Contract_id,h.Contract_Name,y.NetName,h.Contract_Money,h.Contract_T

Python實現"迴文連結串列"的兩種方法

判斷給定的連結串列是否是迴文連結串列 Example 1: Input: 1->2 Output: false Example 2: Input: 1->2->2->1 Output: true 進階：用時間複雜度為O(n)，空間複雜

Python實現"轉換成小寫字母"的兩種方法

實現函式 ToLowerCase()，該函式接收一個字串引數 str，並將該字串中的大寫字母轉換成小寫字母，之後返回新的字串 Example 1: Input: "Hello" Output: "hello" Example 2: Input: "here" Ou

三種方法：遞迴和非遞迴分別實現strlen

不使用庫函式來實現strlen函式：方法1：設定一個計數器len，當str不是‘\0’時，len++；方法2：採用遞迴的想法，將大事化小；“abcde”可是轉化為1+“bcde” … 1+1+1+1+“e”。每一次都訪問str的下一個地址，當然跳出遞迴的條件

css 實現元素水平垂直居中的幾種方法

在做網頁的時候經常會需要讓某一個元素水平垂直居中，而要實現水平垂直居中有很多種方法，不知道你們有沒遇到這種情況：方法倒是知道，甚至還知道許多種，可一到真正用到的時候，卻突然在努力地回想，這或許就是人們經常說的「腦子短路」，所以，這篇文章和大家一起來溫故而知新，梳

markdown中實現首行縮排的兩種方法

　　由於markdown語法主要考慮的是英文，所以對於中文的首行縮排並不太友好，兩種方法都可以完美解決這個問題。把輸入法由半形改為全形。兩次空格之後就能夠有兩個漢字的縮排。在開頭的時候，先輸入下面的程式碼，然後緊跟著輸入文字即可。分號也不要掉。

C#/WPF程式實現軟體開機自動啟動的兩種方法

C#/WPF程式實現軟體開機自動啟動的兩種方法方法一：將軟體的快捷方式建立到計算機的自動啟動目錄下（不需要管理員許可權） 1.必要引用 using System; using System.Collections.Generic; using System.Linq; using Sy

Mysql實現"第二高的薪水"的兩種方法

寫SQL查詢語句獲得Employee表中第二高的薪水 +----+--------+ | Id | Salary | +----+--------+ | 1 | 100 | | 2 | 200 | | 3 | 300 | +----+-------

Java併發：建立執行緒的兩種方法：繼承Thread類和實現Runnable介面（一）

【1】瞭解程序與執行緒的概念程序是一個程式在其自身的地址空間中執行一次活動，是資源申請、排程和獨立執行的單位。執行緒是程序中的一個單一的連續控制流程，一個程序可以包含一個或多個執行緒。如果要在

C語言實現斐波那契數列的兩種方法（遞迴和迭代)

兩種方法實現斐波那契數列，遞迴實現起來稍簡單些，思路也清晰些，但執行效率顯然不如迭代下面是編譯通過的兩種方式實現斐波那契數列的C語言程式碼:/* * fibanacci.c * * Created on: 2015-3-16 * Author: flo

實現程序間資料交換的兩種方法和應用

Windows作業系統是一個多工系統，每個任務都有相應的程序對應。熟悉windows系統的使用者知道，每個程序都有自己獨立的記憶體地址和記憶體空間。這對程序間之間的資料相互訪問和相互交換帶來一定的不便，但是在實際應用中有時要在程序間進行資料交換。windows系統提供了許多方

css實現tooltips框的三角角標 兩種方法：偽類和C3旋轉

一、皆為邊框

二、皆為陰影（採用C3旋轉）

相關推薦

css實現tooltips框的三角角標兩種方法：偽類和C3旋轉