css實現帶尖括號的橫線

阿新 • • 發佈：2021-01-29

技術標籤：css css3

目錄

效果圖

在這裡插入圖片描述

原理

css偽元素 + 兩個三角形重疊（border）

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</ 
title>
  <style>
    .line{
      margin: 30px;
      position: relative;
      width: 100px;
      height: 2px;
      background: #1145bf;
    }
    .line::before,
    .line::after{
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 0;
      margin-left 
: -5px;
      border: 5px solid;
      border-color: transparent transparent #1145bf;
    }
    .line::after {
      border-width: 3px;
      margin-left: -3px;
      border-color: transparent transparent #fff;
    }
  </style>
</head>
<body>
  <div class="line"></div 
>
</body>
</html>

參考連結

css實現帶尖括號的橫線

技術標籤：csscss3 目錄效果圖原理程式碼參考連結效果圖原理 css偽元素 + 兩個三角形重疊（border）

Android實現帶進度條的WebView

在載入H5頁面的時候，可能由於網路、頁面內容複雜度等原因，導致載入過程出現空白，加上進度條可以有效提高使用者體驗

Python+opencv+pyaudio實現帶聲音螢幕錄製

基於個人的愛好和現實的需求，決定用Python做一個螢幕錄製的指令碼。因為要看一些加密的視訊，每次都要登入，特別麻煩，遂決定用自己寫的指令碼，將加密視訊的播放過程全程錄製下來，這樣以後看自己的錄播就好了。結

wxPython實現帶顏色的進度條

本文例項為大家分享了wxPython實現帶顏色進度條的具體程式碼，供大家參考，具體內容如下

js實現帶搜尋功能的下拉框

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

D3.js 實現帶伸縮時間軸拓撲圖的示例程式碼

效果圖: 基於d3-v5,依賴dagre-d3,直接上程式碼: <!DOCTYPE html> <html lang=\"en\">

vue實現帶過渡效果的下拉選單功能

本文例項為大家分享了vue中仿寫下拉選單功能，帶有過渡效果(移動端)，供大家參考，具體內容如下

iOS實現帶遮罩的彈出選項卡

在我們日常開發的過程中難免會碰到一些選項的需求，下面是我針對我們該次需求做的一個小的Demo，閒話不多說了，上圖片，上程式碼。

JS+CSS實現3D切割輪播圖

本文例項為大家分享了JS+CSS實現3D切割輪播圖的具體程式碼，供大家參考，具體內容如下

Android自定義View實現帶4圓角或者2圓角的效果

1 問題實現任意view經過自定義帶4圓角或者2圓角的效果 2 原理 1) 實現view 4圓角我們只需要把左邊的圖嵌入到右邊裡面去，最終顯示左邊的圖就行。

javascript+css實現進度條效果

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

js實現帶箭頭的進度流程

本文例項為大家分享了js實現帶箭頭進度流程的具體程式碼，供大家參考，具體內容如下

Android實現帶節點的進度條

日常的開發中經常會需要用到自定義View，這次剛好有個需求，需要用到帶有節點的進度條。東西很簡單直接繼承View就行了。

jquery css實現流程進度條

本文例項為大家分享了jquery css實現流程進度條的具體程式碼，供大家參考，具體內容如下

C++ 實現帶監視哨的順序查詢演算法

監視哨往往是程式裡面的一個變數，如果是對數字排序的話，那麼該變數一般是數值型變數。變數的賦值就相當於哨兵，當排序數列中出現與哨兵相等的值或有某種既定關係出現時，就做一種操作，比如說停止排序，或進行下一

150行Python程式碼實現帶介面的數獨遊戲

今天閒著沒事幹，以前做過html+js版的數獨，這次做個python版本的，介面由pygame完成，數獨生成由遞迴演算法實現，由shuffle保證每次遊戲都是不一樣的情況，have fun；

react使用CSS實現react動畫功能示例

本文例項講述了react使用CSS實現react動畫功能。分享給大家供大家參考，具體如下：

UGUI ScrollRect實現帶按鈕翻頁支援拖拽

本文例項為大家分享了UGUI ScrollRect帶按鈕翻頁支援拖拽的具體程式碼，供大家參考，具體內容如下

微信小程式實現帶放大效果的輪播圖

本文例項為大家分享了微信小程式實現帶放大效果的輪播圖，供大家參考，具體內容如下

jQuery+css實現的點選圖片放大縮小預覽功能示例【圖片預覽檢視大圖】

本文例項講述了jQuery+css實現的點選圖片放大縮小預覽功能。分享給大家供大家參考，具體如下：