css3绘制三角形

来源：互联网发布：广州恒大淘宝俱乐部编辑：程序博客网时间：2024/06/05 15:44

以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。

这是运行效果图

这是完整代码

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style type="text/css">            *{margin: 0; padding: 0;}            .container{                margin: 0 auto;                 padding-top: 30px;                 width: 1000px;            }            .squares{                position: relative;                margin-top: 30px;                border: 1px solid #ccc;                width: 100px;                height: 100px;            }            .triangle{                display: inline-block;                position: absolute;            }            /* 下 */            .triangleBottom{                bottom: -15px;                left: 35%;                display: inline-block;                border-top: 15px solid #ccc;                border-right: 15px solid transparent;                border-left: 15px solid transparent;            }            /* 左 */            .triangleLeft{                top: 35%;                left: -15px;                display: inline-block;                border-top: 15px solid transparent;                border-right: 15px solid #ccc;                border-bottom: 15px solid transparent;            }            /* 上 */            .triangleTop{                top: -15px;                left: 35%;                display: inline-block;                border-right: 15px solid transparent;                border-bottom: 15px solid #ccc;                border-left: 15px solid transparent;            }            /* 右 */            .triangleRight{                top: 35%;                right: -15px;                display: inline-block;                border-top: 15px solid transparent;                border-bottom: 15px solid transparent;                border-left: 15px solid #ccc;            }        </style>     </head>    <body>        <div class="container">            <div class="squares">                <span class="triangle triangleBottom"></span>                <span class="triangle triangleLeft"></span>                <span class="triangle triangleTop"></span>                <span class="triangle triangleRight"></span>            </div>        </div>    </body></html>

阅读全文

0 0