css畫橫線箭頭 如何用純CSS實現的箭頭的效果?

2021-10-13 11:42:31 字數 2595 閱讀 1184

《如何用純css實現的箭頭的效果?》要點:

用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。

基本原理

原理非常簡單,通過擷取border(邊框)的部分「拐角」實現,幾行css**即可理解:

乙個梯形

當元素寬、高和邊框的寬相近(等)時,改變某一邊的顏色可以看到乙個梯形;

#demo11 {

border: 10px solid #000;

border-left-color: #f00;

width: 10px;

height: 10px;

乙個三角形

當元素寬、高為零,且其他邊為透明顏色時,可以形乙個三角形。

#demo12 {

border: 10px solid #000;

border-left-color: #f00;

width: 0;

height: 0;

任意角度的三角形

改變各個邊的寬度,即通過調整「邊框」厚度可以配置出任意角度

#demo14 {

border: 10px solid transparent;

border-left: 20px solid #f00;

width: 0;

height: 0px;

通過偽元素實現

三角形可以通過偽元素繪製出,而無需改變原來的dom結構文字內容

#demo15{

position: relative;

#demo15:after {

border: 10px solid transparent;

border-left: 10px solid #f00;

width: 0;

height: 0;

position: absolute;

content: ' '

偽元素實現三角線箭頭

通過偽元素繪製出的兩個,乙個與背景色相同覆蓋部分紅色箭頭,形成三角線文字內容

#demo16{

position: relative;

#demo16:after, #demo16:before {

border: 10px solid transparent;

border-left: 10px solid #fff;

width: 0;

height: 0;

position: absolute;

top: 0;

right: -20px;

content: ' '

#demo16:before {

border-left-color: #f00;

right: -21px;

三角線分割的tab頁文字內容 tab1

文字內容 tab2

文字內容 tab3

#demo17{

font-size: 10px;

height: 24px;

#demo17 li {

float: left;

position: relative;

list-style: none;

margin: 0 20px 12px -19px;

border-top: solid 1px #ddd;

border-bottom: solid 1px #ddd;

padding-left: 12px;

#demo17 li:after, #demo17 li:before {

border: 10px solid transparent;

border-left: 10px solid #fff;

width: 0;

height: 0;

position: absolute;

top: 0;

right: -18px;

content: ' '

#demo17 li:before {

border-left-color: #ddd;

right: -19px;

三角形跟矩形組合成提示框

這裡還有另一種效果,使用三角形跟矩形組合成提示框

#demo {

width: 100px;

height: 100px;

background-color: #ccc;

position: relative;

border: 4px solid #333;

#demo:after, #demo:before {

border: solid transparent;

content: ' ';

height: 0;

left: 100%;

position: absolute;

width: 0;

#demo:after {

border-width: 9px;

border-left-color: #ccc;

top: 15px;

#demo:before {

border-width: 14px;

border-left-color: #333;

top: 10px;

css畫橫線箭頭 用純CSS實現的箭頭

用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單,通過擷取border 邊框 的部分 拐角 實現,幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...

css畫橫線箭頭 CSS繪製箭頭

實際需求中,很多時候都會有箭頭的情況,只不過一開始總是喜歡找別人寫好的,隨著需求的增加,很難通過修改來滿足需求,所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...

css畫橫線箭頭 CSS 如何畫三角形和箭頭

使用 border 畫三角形和箭頭 一條邊框在和模型中其實並不是一條線,如果我們將邊框設定得足夠大,並且設定不同的顏色,我們就很容易看到邊框的本質,從下圖很容易可以看出其事 border 在乙個正方形 dom 上其實是乙個梯形 css border.png 畫三角形 利用這一原理我們可以將 dom ...