纯css制作三角形+常用的对话框实例

来源：互联网发布：淘宝手机配件货源编辑：程序博客网时间：2024/05/22 03:45

网页中经常用到三角形的地方，用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>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;        }        div{            margin: 20px;        }        .box{            position: relative;            display: inline-block;            max-width: 200px;            padding: 4px 8px;            border-radius: 2px;            background-color: green;            line-height: 20px;            font-size: 14px;        }        .u-tri:before{            position: absolute;            left: -24px;            top: 4px;            content: '';            border-top: 8px solid transparent;            border-bottom: 8px solid transparent;            border-left: 12px solid transparent;            border-right: 12px solid green;        }    </style></head><body>    <div>        <p class="box u-tri">测试</p>    </div>    <div>        <p class="box u-tri">nizahhhshs 哈哈哈哈哈哈我只是个则是的我只是个可爱的测试案列e</p>    </div></body></html>

阅读全文

0 0