css畫三角形和提示框

dockerclub 發布于2019-08-29 16:08 / 1238人閱讀

摘要：想要的效果圖片利用偽元素原理兩個三角形一樣大，位置錯開，第一個紅色第二個白色，第二個覆蓋第一個三角形畫法，不多說，利用和上代碼

想要的效果（圖片）

利用css偽元素

demo1.gif

原理

兩個三角形一樣大，位置錯開1~2px，第一個紅色第二個白色，第二個覆蓋第一個
三角形畫法，不多說，利用border 和 transparent

上代碼

.a::before {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    position: absolute;
    top: -4px;
    left: 38px;
  }
  .a::after {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    top: -3px;
    left: 38px;
    position: absolute;
  }
  .a {
    position: relative;
    position: relative;
    display: inline-block;
    border: 1px solid red;
    width: 80px;
    height: 20px;
    text-align: center;
  }

云服務器 GPU云服務器畫三角形 html畫三角箭頭 css三角形 css三角

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113553.html

前端每日實戰：153# 視頻演示如何用 CSS 和原生 JS 創作一組 tooltip 提示框

摘要：這里的常量存儲了個方向，常量存儲了個鼠標事件，常量包裝了根據類名獲取元素的操作為眼珠設置緩動時間，使動畫平滑接下來制作提示框。 showImg(https://segmentfault.com/img/bVbh12C?w=400&h=303); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/r...

高勝山 2019-08-29 16:55 評論0 收藏0
前端每日實戰：153# 視頻演示如何用 CSS 和原生 JS 創作一組 tooltip 提示框

摘要：這里的常量存儲了個方向，常量存儲了個鼠標事件，常量包裝了根據類名獲取元素的操作為眼珠設置緩動時間，使動畫平滑接下來制作提示框。 showImg(https://segmentfault.com/img/bVbh12C?w=400&h=303); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehope/pen/r...

趙春朋 2019-08-23 12:17 評論0 收藏0
css3之圖形繪制

摘要：由于近期的項目中出現了不規則的邊框和圖形，所以重新溫習一下的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣以下幾個例子主要是運用了中偽元素等屬性來完成的，我們先了解下它們的基本原理。由于近期的項目中出現了不規則的邊框和圖形，所以重新溫習一下CSS3的圖形繪制。。。樣式繪制的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣！以下幾個例子主要是運用了css3中b...

Null 2019-04-23 13:28 評論0 收藏0
css3圖形繪制

摘要：以下幾個例子主要是運用了中偽元素等屬性來完成的，我們先了解下它們的基本原理。簡單的來說語法主要包含三個屬性。你可能會驚訝地發現原來是一個簡寫屬性。以下幾個例子主要是運用了css3中border、bordr-radius、transform、偽元素等屬性來完成的，我們先了解下它們的基本原理。 ? ? ??border：簡單的來說border語法主要包含（border-width、border-...

niceforbear 2019-04-23 13:09 評論0 收藏0