标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> /* 浮动与清浮动 */ .fl { float: left; } .fr { float: right; } .cf { *zoom: 1 } .cf:after { clear: both; content: ‘.‘; display: block; height: 0; overflow: hidden } /* 三角符号 */ .arrow_t, .arrow_r, .arrow_b, .arrow_l { width: 0; height: 0; line-height: 0; font-size: 0; margin: 0 4px; display: inline-block; border: 6px dashed transparent; } .arrow_t { border-bottom: 6px solid #40cfea; border-top: 0 none; } .arrow_r { border-left: 6px solid #40cfea; border-right: 0 none; } .arrow_b { border-top: 6px solid #40cfea; border-bottom: 0 none; } .arrow_l { border-right: 6px solid #40cfea; border-left: 0 none; } /* 带边框的三角符号 */ .border_arrow_t, .border_arrow_r, .border_arrow_b, .border_arrow_l { line-height: 20px; border: 1px solid #40cfea; padding: 3px 6px; display: inline-block; background: #e4f6fa; color: #40cfea; position: relative; margin: 0 4px } .border_arrow_t b, .border_arrow_r b, .border_arrow_b b, .border_arrow_l b, .border_arrow_t i, .border_arrow_r i, .border_arrow_b i, .border_arrow_l i { position: absolute; height: 0; width: 0; line-height: 0; font-size: 0; border: 6px dashed transparent; } .border_arrow_l b { border-right: 6px solid #40cfea; left: -6px; top: 50%; margin-top: -4px; border-left: 0 none; } .border_arrow_l i { border-right: 6px solid #e4f6fa; left: -5px; top: 50%; margin-top: -4px; border-left: 0 none; } .border_arrow_r b { border-left: 6px solid #40cfea; right: -6px; top: 50%; margin-top: -4px; border-right: 0 none; } .border_arrow_r i { border-left: 6px solid #e4f6fa; right: -5px; top: 50%; margin-top: -4px; border-right: 0 none; } .border_arrow_t b { border-bottom: 6px solid #40cfea; top: -6px; left: 50%; margin-left: -4px; border-top: 0 none; } .border_arrow_t i { border-bottom: 6px solid #e4f6fa; top: -5px; left: 50%; margin-left: -4px; border-top: 0 none; } .border_arrow_b b { border-top: 6px solid #40cfea; bottom: -6px; left: 50%; margin-left: -4px; border-bottom: 0 none; } .border_arrow_b i { border-top: 6px solid #e4f6fa; bottom: -5px; left: 50%; margin-left: -4px; border-bottom: 0 none; } /* 半透明背景 */ .btm, .btm_hover:hover { color: #fff; filter: progid: dximagetransform.microsoft.gradient(enabled=‘true‘, startcolorstr=‘#44000000‘, endcolorstr=‘#44000000‘) } :root .btm, :root .btm_hover { filter: none; background: rgba(0, 0, 0, 0.2); } </style> </head> <body> <span class="arrow_t"></span> <span class="arrow_r"></span> <span class="arrow_b"></span> <span class="arrow_l"></span> <span class="border_arrow_t"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span> <span class="border_arrow_r"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span> <span class="border_arrow_b"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span> <span class="border_arrow_l"><b></b><i></i>11111111111111111111<br>1111111111111111111111</span> </body> </html>
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4321238.html
