网页中经常用到三角形的地方,用css写三角形的方法很简单
html:
<span class="u-tri"></span>
css:
.u-tri{
display: inline-block;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid red;
}
效果图:
想要三角形的尖角方向朝哪边,对应的相反一边设置颜色。比如尖角向上,则boder-bottom的color上色,其它三边为透明。
实例:对话框背景
先上最后的效果图:
完整代码:
<!doctype html>
<html lang="en">
<head>