用纯CSS实现的箭头
用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。
基本原理
原理非常简单，通过截取border(边框)的部分"拐角"实现，几行CSS代码即可理解：
一个梯形
当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；
::: {#demo11} :::
:::: {#highlighter_625101 .syntaxhighlighter .xml} ::: toolbar :::
+-------------------------------------+-----------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} id{.xml .color1}={.xml |
| ::: {.line .number2 .index1 .alt1} | .plain}"demo11"{.xml |
| 2 | .string}></{.xml .plain}div{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | <{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| ::: {.line .number5 .index4 .alt2} | ::: |
| 5 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | #demo11 {{.xml .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.xml |
| ::: {.line .number7 .index6 .alt2} | .spaces}border: 10px solid #000;{.xml |
| 7 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number8 .index7 .alt1} | ::: {.line .number6 .index5 .alt1} |
| 8 | {.xml |
| ::: | .spaces}border-left-color: #f00;{.xml |
| | .plain} |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number7 .index6 .alt2} |
| | {.xml .spaces}width: 10px;{.xml |
| ::: {.line .number10 .index9 .alt1} | .plain} |
| 10 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| | {.xml .spaces}height: 10px;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number10 .index9 .alt1} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::::::: |
+-------------------------------------+-----------------------------------------+
::::
一个三角形
当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。
::: {#demo13} :::
:::: {#highlighter_215812 .syntaxhighlighter .xml} ::: toolbar :::
+-------------------------------------+-----------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} id{.xml .color1}={.xml |
| ::: {.line .number2 .index1 .alt1} | .plain}"demo12"{.xml |
| 2 | .string}></{.xml .plain}div{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | <{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| ::: {.line .number5 .index4 .alt2} | ::: |
| 5 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | #demo12 {{.xml .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.xml |
| ::: {.line .number7 .index6 .alt2} | .spaces}border: 10px solid #000;{.xml |
| 7 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number8 .index7 .alt1} | ::: {.line .number6 .index5 .alt1} |
| 8 | {.xml |
| ::: | .spaces}border-left-color: #f00;{.xml |
| | .plain} |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number7 .index6 .alt2} |
| | {.xml .spaces}width: 0;{.xml |
| ::: {.line .number10 .index9 .alt1} | .plain} |
| 10 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| | {.xml .spaces}height: 0;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number10 .index9 .alt1} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::::::: |
+-------------------------------------+-----------------------------------------+
::::
任意角度的三角形
改变各个边的宽度，即通过调整"边框"厚度可以配置出任意角度
::: {#demo14} :::
:::: {#highlighter_510328 .syntaxhighlighter .xml} ::: toolbar :::
+-------------------------------------+------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml .keyword} id{.xml |
| | .color1}={.xml .plain}"demo14"{.xml |
| ::: {.line .number2 .index1 .alt1} | .string}></{.xml .plain}div{.xml |
| 2 | .keyword}>{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number3 .index2 .alt2} | ::: {.line .number2 .index1 .alt1} |
| 3 | |
| ::: | ::: |
| | |
| ::: {.line .number4 .index3 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 4 | <{.xml .plain}style{.xml .keyword}>{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | #demo14 {{.xml .plain} |
| | ::: |
| ::: {.line .number6 .index5 .alt1} | |
| 6 | ::: {.line .number5 .index4 .alt2} |
| ::: | {.xml |
| | .spaces}border: 10px solid transparent;{.xml |
| ::: {.line .number7 .index6 .alt2} | .plain} |
| 7 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number8 .index7 .alt1} | {.xml |
| 8 | .spaces}border-left: 20px solid #f00;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number9 .index8 .alt2} | |
| 9 | ::: {.line .number7 .index6 .alt2} |
| ::: | {.xml .spaces}width: 0;{.xml .plain} |
| | ::: |
| ::: {.line .number10 .index9 .alt1} | |
| 10 | ::: {.line .number8 .index7 .alt1} |
| ::: | {.xml .spaces}height: 0px;{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number10 .index9 .alt1} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::::::: |
+-------------------------------------+------------------------------------------------+
::::
通过伪元素实现
三角形可以通过伪元素绘制出，而无需改变原来的DOM结构
[文字内容]{#demo15}
:::: {#highlighter_614833 .syntaxhighlighter .xml} ::: toolbar :::
+--------------------------------------+------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}span{.xml |
| | .keyword} id{.xml .color1}={.xml |
| ::: {.line .number2 .index1 .alt1} | .plain}"demo15"{.xml |
| 2 | .string}>文字内容</{.xml .plain}span{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | <{.xml .plain}style{.xml .keyword}>{.xml |
| | .plain} |
| ::: {.line .number5 .index4 .alt2} | ::: |
| 5 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | #demo15{{.xml .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.xml .spaces}position: relative;{.xml |
| ::: {.line .number7 .index6 .alt2} | .plain} |
| 7 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number8 .index7 .alt1} | }{.xml .plain} |
| 8 | ::: |
| ::: | |
| | ::: {.line .number7 .index6 .alt2} |
| ::: {.line .number9 .index8 .alt2} | #demo15:after {{.xml .plain} |
| 9 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| ::: {.line .number10 .index9 .alt1} | {.xml |
| 10 | .spaces}border: 10px solid transparent;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number9 .index8 .alt2} |
| ::: | {.xml |
| | .spaces}border-left: 10px solid #f00;{.xml |
| ::: {.line .number12 .index11 .alt1} | .plain} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number13 .index12 .alt2} | {.xml .spaces}width: 0;{.xml .plain} |
| 13 | ::: |
| ::: | |
| | ::: {.line .number11 .index10 .alt2} |
| ::: {.line .number14 .index13 .alt1} | {.xml .spaces}height: 0;{.xml .plain} |
| 14 | ::: |
| ::: | |
| | ::: {.line .number12 .index11 .alt1} |
| ::: {.line .number15 .index14 .alt2} | {.xml .spaces}position: absolute;{.xml |
| 15 | .plain} |
| ::: | ::: |
| | |
| | ::: {.line .number13 .index12 .alt2} |
| | {.xml .spaces}content: ' '{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number14 .index13 .alt1} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number15 .index14 .alt2} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | :::::::::::::::::: |
+--------------------------------------+------------------------------------------------+
::::
伪元素实现三角线箭头
通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线
[文字内容]{#demo16}
:::: {#highlighter_803848 .syntaxhighlighter .xml} ::: toolbar :::
+--------------------------------------+------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}span{.xml |
| | .keyword} id{.xml .color1}={.xml |
| ::: {.line .number2 .index1 .alt1} | .plain}"demo15"{.xml |
| 2 | .string}>文字内容</{.xml .plain}span{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | <{.xml .plain}style{.xml .keyword}>{.xml |
| | .plain} |
| ::: {.line .number5 .index4 .alt2} | ::: |
| 5 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | #demo16{{.xml .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.xml .spaces}position: relative;{.xml |
| ::: {.line .number7 .index6 .alt2} | .plain} |
| 7 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number8 .index7 .alt1} | }{.xml .plain} |
| 8 | ::: |
| ::: | |
| | ::: {.line .number7 .index6 .alt2} |
| ::: {.line .number9 .index8 .alt2} | #demo16:after, #demo16:before {{.xml .plain} |
| 9 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| ::: {.line .number10 .index9 .alt1} | {.xml |
| 10 | .spaces}border: 10px solid transparent;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number9 .index8 .alt2} |
| ::: | {.xml |
| | .spaces}border-left: 10px solid #fff;{.xml |
| ::: {.line .number12 .index11 .alt1} | .plain} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number13 .index12 .alt2} | {.xml .spaces}width: 0;{.xml .plain} |
| 13 | ::: |
| ::: | |
| | ::: {.line .number11 .index10 .alt2} |
| ::: {.line .number14 .index13 .alt1} | {.xml .spaces}height: 0;{.xml .plain} |
| 14 | ::: |
| ::: | |
| | ::: {.line .number12 .index11 .alt1} |
| ::: {.line .number15 .index14 .alt2} | {.xml .spaces}position: absolute;{.xml |
| 15 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number16 .index15 .alt1} | ::: {.line .number13 .index12 .alt2} |
| 16 | {.xml .spaces}top: 0;{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number17 .index16 .alt2} | ::: {.line .number14 .index13 .alt1} |
| 17 | {.xml .spaces}right: -20px;{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number18 .index17 .alt1} | ::: {.line .number15 .index14 .alt2} |
| 18 | {.xml .spaces}content: ' '{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number19 .index18 .alt2} | ::: {.line .number16 .index15 .alt1} |
| 19 | }{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number20 .index19 .alt1} | ::: {.line .number17 .index16 .alt2} |
| 20 | |
| ::: | ::: |
| | |
| ::: {.line .number21 .index20 .alt2} | ::: {.line .number18 .index17 .alt1} |
| 21 | #demo16:before {{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number22 .index21 .alt1} | ::: {.line .number19 .index18 .alt2} |
| 22 | {.xml |
| ::: | .spaces}border-left-color: #f00;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | {.xml .spaces}right: -21px;{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::::::::::::::::::: |
+--------------------------------------+------------------------------------------------+
::::
三角线分割的Tab页
- 文字内容 Tab1
- 文字内容 Tab2
- 文字内容 Tab3
:::: {#highlighter_792288 .syntaxhighlighter .xml} ::: toolbar :::
+--------------------------------------+-----------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}ul{.xml .keyword} id{.xml |
| | .color1}={.xml .plain}"demo17"{.xml |
| ::: {.line .number2 .index1 .alt1} | .string}>{.xml .plain} |
| 2 | ::: |
| ::: | |
| | ::: {.line .number2 .index1 .alt1} |
| ::: {.line .number3 .index2 .alt2} | {.xml .spaces}<{.xml .plain}li{.xml |
| 3 | .keyword}>文字内容 Tab1</{.xml .plain}li{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | {.xml .spaces}<{.xml .plain}li{.xml |
| | .keyword}>文字内容 Tab2</{.xml .plain}li{.xml |
| ::: {.line .number5 .index4 .alt2} | .keyword}>{.xml .plain} |
| 5 | ::: |
| ::: | |
| | ::: {.line .number4 .index3 .alt1} |
| ::: {.line .number6 .index5 .alt1} | {.xml .spaces}<{.xml .plain}li{.xml |
| 6 | .keyword}>文字内容 Tab3</{.xml .plain}li{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number7 .index6 .alt2} | |
| 7 | ::: {.line .number5 .index4 .alt2} |
| ::: | </{.xml .plain}ul{.xml .keyword}>{.xml |
| | .plain} |
| ::: {.line .number8 .index7 .alt1} | ::: |
| 8 | |
| ::: | ::: {.line .number6 .index5 .alt1} |
| | |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number7 .index6 .alt2} |
| | <{.xml .plain}style{.xml .keyword}>{.xml |
| ::: {.line .number10 .index9 .alt1} | .plain} |
| 10 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| ::: {.line .number11 .index10 .alt2} | #demo17{{.xml .plain} |
| 11 | ::: |
| ::: | |
| | ::: {.line .number9 .index8 .alt2} |
| ::: {.line .number12 .index11 .alt1} | {.xml .spaces}font-size: 10px;{.xml .plain} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number13 .index12 .alt2} | {.xml .spaces}height: 24px;{.xml .plain} |
| 13 | ::: |
| ::: | |
| | ::: {.line .number11 .index10 .alt2} |
| ::: {.line .number14 .index13 .alt1} | }{.xml .plain} |
| 14 | ::: |
| ::: | |
| | ::: {.line .number12 .index11 .alt1} |
| ::: {.line .number15 .index14 .alt2} | |
| 15 | ::: |
| ::: | |
| | ::: {.line .number13 .index12 .alt2} |
| ::: {.line .number16 .index15 .alt1} | #demo17 li {{.xml .plain} |
| 16 | ::: |
| ::: | |
| | ::: {.line .number14 .index13 .alt1} |
| ::: {.line .number17 .index16 .alt2} | {.xml .spaces}float: left;{.xml .plain} |
| 17 | ::: |
| ::: | |
| | ::: {.line .number15 .index14 .alt2} |
| ::: {.line .number18 .index17 .alt1} | {.xml .spaces}position: relative;{.xml |
| 18 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number19 .index18 .alt2} | ::: {.line .number16 .index15 .alt1} |
| 19 | {.xml .spaces}list-style: none;{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number20 .index19 .alt1} | ::: {.line .number17 .index16 .alt2} |
| 20 | {.xml .spaces}margin: 0 20px 12px -19px;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number21 .index20 .alt2} | |
| 21 | ::: {.line .number18 .index17 .alt1} |
| ::: | {.xml |
| | .spaces}border-top: solid 1px #ddd;{.xml .plain} |
| ::: {.line .number22 .index21 .alt1} | ::: |
| 22 | |
| ::: | ::: {.line .number19 .index18 .alt2} |
| | {.xml |
| ::: {.line .number23 .index22 .alt2} | .spaces}border-bottom: solid 1px #ddd;{.xml |
| 23 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number24 .index23 .alt1} | ::: {.line .number20 .index19 .alt1} |
| 24 | {.xml .spaces}padding-left: 12px;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number25 .index24 .alt2} | |
| 25 | ::: {.line .number21 .index20 .alt2} |
| ::: | }{.xml .plain} |
| | ::: |
| ::: {.line .number26 .index25 .alt1} | |
| 26 | ::: {.line .number22 .index21 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number27 .index26 .alt2} | |
| 27 | ::: {.line .number23 .index22 .alt2} |
| ::: | #demo17 li:after, #demo17 li:before {{.xml |
| | .plain} |
| ::: {.line .number28 .index27 .alt1} | ::: |
| 28 | |
| ::: | ::: {.line .number24 .index23 .alt1} |
| | {.xml |
| ::: {.line .number29 .index28 .alt2} | .spaces}border: 10px solid transparent;{.xml |
| 29 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number30 .index29 .alt1} | ::: {.line .number25 .index24 .alt2} |
| 30 | {.xml |
| ::: | .spaces}border-left: 10px solid #fff;{.xml |
| | .plain} |
| ::: {.line .number31 .index30 .alt2} | ::: |
| 31 | |
| ::: | ::: {.line .number26 .index25 .alt1} |
| | {.xml .spaces}width: 0;{.xml .plain} |
| ::: {.line .number32 .index31 .alt1} | ::: |
| 32 | |
| ::: | ::: {.line .number27 .index26 .alt2} |
| | {.xml .spaces}height: 0;{.xml .plain} |
| ::: {.line .number33 .index32 .alt2} | ::: |
| 33 | |
| ::: | ::: {.line .number28 .index27 .alt1} |
| | {.xml .spaces}position: absolute;{.xml |
| ::: {.line .number34 .index33 .alt1} | .plain} |
| 34 | ::: |
| ::: | |
| | ::: {.line .number29 .index28 .alt2} |
| ::: {.line .number35 .index34 .alt2} | {.xml .spaces}top: 0;{.xml .plain} |
| 35 | ::: |
| ::: | |
| | ::: {.line .number30 .index29 .alt1} |
| ::: {.line .number36 .index35 .alt1} | {.xml .spaces}right: -18px;{.xml .plain} |
| 36 | ::: |
| ::: | |
| | ::: {.line .number31 .index30 .alt2} |
| ::: {.line .number37 .index36 .alt2} | {.xml .spaces}content: ' '{.xml .plain} |
| 37 | ::: |
| ::: | |
| | ::: {.line .number32 .index31 .alt1} |
| ::: {.line .number38 .index37 .alt1} | }{.xml .plain} |
| 38 | ::: |
| ::: | |
| | ::: {.line .number33 .index32 .alt2} |
| | |
| | ::: |
| | |
| | ::: {.line .number34 .index33 .alt1} |
| | #demo17 li:before {{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number35 .index34 .alt2} |
| | {.xml .spaces}border-left-color: #ddd;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number36 .index35 .alt1} |
| | {.xml .spaces}right: -19px;{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number37 .index36 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number38 .index37 .alt1} |
| | </{.xml .plain}style{.xml .keyword}>{.xml |
| | .plain} |
| | ::: |
| | ::::::::::::::::::::::::::::::::::::::::: |
+--------------------------------------+-----------------------------------------------------+
::::
三角形跟矩形组合成提示框
这里还有另一种效果，使用三角形跟矩形组合成提示框，代码来自这篇文章：[ ]{.Apple-converted-space}Css arrows and shapes without markup{target="_blank"}
::: {#demo} :::
\
:::: {#highlighter_357092 .syntaxhighlighter .xml} ::: toolbar :::
+--------------------------------------+-----------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | <{.xml .plain}div{.xml |
| | .keyword} id{.xml .color1}={.xml |
| ::: {.line .number2 .index1 .alt1} | .plain}"demo"{.xml .string}></{.xml |
| 2 | .plain}div{.xml .keyword}>{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number3 .index2 .alt2} | ::: {.line .number2 .index1 .alt1} |
| 3 | |
| ::: | ::: |
| | |
| ::: {.line .number4 .index3 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 4 | <{.xml .plain}style{.xml |
| ::: | .keyword}>{.xml .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | #demo {{.xml .plain} |
| | ::: |
| ::: {.line .number6 .index5 .alt1} | |
| 6 | ::: {.line .number5 .index4 .alt2} |
| ::: | {.xml .spaces}width: 100px;{.xml |
| | .plain} |
| ::: {.line .number7 .index6 .alt2} | ::: |
| 7 | |
| ::: | ::: {.line .number6 .index5 .alt1} |
| | {.xml .spaces}height: 100px;{.xml |
| ::: {.line .number8 .index7 .alt1} | .plain} |
| 8 | ::: |
| ::: | |
| | ::: {.line .number7 .index6 .alt2} |
| ::: {.line .number9 .index8 .alt2} | {.xml |
| 9 | .spaces}background-color: #ccc;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number10 .index9 .alt1} | |
| 10 | ::: {.line .number8 .index7 .alt1} |
| ::: | {.xml .spaces}position: relative;{.xml |
| | .plain} |
| ::: {.line .number11 .index10 .alt2} | ::: |
| 11 | |
| ::: | ::: {.line .number9 .index8 .alt2} |
| | {.xml |
| ::: {.line .number12 .index11 .alt1} | .spaces}border: 4px solid #333;{.xml |
| 12 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number13 .index12 .alt2} | ::: {.line .number10 .index9 .alt1} |
| 13 | }{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number14 .index13 .alt1} | ::: {.line .number11 .index10 .alt2} |
| 14 | |
| ::: | ::: |
| | |
| ::: {.line .number15 .index14 .alt2} | ::: {.line .number12 .index11 .alt1} |
| 15 | #demo:after, #demo:before {{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number16 .index15 .alt1} | ::: {.line .number13 .index12 .alt2} |
| 16 | {.xml |
| ::: | .spaces}border: solid transparent;{.xml |
| | .plain} |
| ::: {.line .number17 .index16 .alt2} | ::: |
| 17 | |
| ::: | ::: {.line .number14 .index13 .alt1} |
| | {.xml .spaces}content: ' ';{.xml |
| ::: {.line .number18 .index17 .alt1} | .plain} |
| 18 | ::: |
| ::: | |
| | ::: {.line .number15 .index14 .alt2} |
| ::: {.line .number19 .index18 .alt2} | {.xml .spaces}height: 0;{.xml .plain} |
| 19 | ::: |
| ::: | |
| | ::: {.line .number16 .index15 .alt1} |
| ::: {.line .number20 .index19 .alt1} | {.xml .spaces}left: 100%;{.xml .plain} |
| 20 | ::: |
| ::: | |
| | ::: {.line .number17 .index16 .alt2} |
| ::: {.line .number21 .index20 .alt2} | {.xml .spaces}position: absolute;{.xml |
| 21 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number22 .index21 .alt1} | ::: {.line .number18 .index17 .alt1} |
| 22 | {.xml .spaces}width: 0;{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number23 .index22 .alt2} | ::: {.line .number19 .index18 .alt2} |
| 23 | }{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number24 .index23 .alt1} | ::: {.line .number20 .index19 .alt1} |
| 24 | |
| ::: | ::: |
| | |
| ::: {.line .number25 .index24 .alt2} | ::: {.line .number21 .index20 .alt2} |
| 25 | #demo:after {{.xml .plain} |
| ::: | ::: |
| | |
| ::: {.line .number26 .index25 .alt1} | ::: {.line .number22 .index21 .alt1} |
| 26 | {.xml .spaces}border-width: 9px;{.xml |
| ::: | .plain} |
| | ::: |
| ::: {.line .number27 .index26 .alt2} | |
| 27 | ::: {.line .number23 .index22 .alt2} |
| ::: | {.xml |
| | .spaces}border-left-color: #ccc;{.xml |
| ::: {.line .number28 .index27 .alt1} | .plain} |
| 28 | ::: |
| ::: | |
| | ::: {.line .number24 .index23 .alt1} |
| ::: {.line .number29 .index28 .alt2} | {.xml .spaces}top: 15px;{.xml .plain} |
| 29 | ::: |
| ::: | |
| | ::: {.line .number25 .index24 .alt2} |
| ::: {.line .number30 .index29 .alt1} | }{.xml .plain} |
| 30 | ::: |
| ::: | |
| | ::: {.line .number26 .index25 .alt1} |
| ::: {.line .number31 .index30 .alt2} | |
| 31 | ::: |
| ::: | |
| | ::: {.line .number27 .index26 .alt2} |
| ::: {.line .number32 .index31 .alt1} | #demo:before {{.xml .plain} |
| 32 | ::: |
| ::: | |
| | ::: {.line .number28 .index27 .alt1} |
| | {.xml .spaces}border-width: 14px;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number29 .index28 .alt2} |
| | {.xml |
| | .spaces}border-left-color: #333;{.xml |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number30 .index29 .alt1} |
| | {.xml .spaces}top: 10px;{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number31 .index30 .alt2} |
| | }{.xml .plain} |
| | ::: |
| | |
| | ::: {.line .number32 .index31 .alt1} |
| | </{.xml .plain}style{.xml |
| | .keyword}>{.xml .plain} |
| | ::: |
| | ::::::::::::::::::::::::::::::::::: |
+--------------------------------------+-----------------------------------------------+
::::
本文作者：newghost
原文地址：http://ourjs.com/detail/532bc9f36922aa7e1d000001
湘公网安备 43010302000398号