布局中实现三角形的几种方法

来源：互联网发布：ipad上看文献知乎编辑：程序博客网时间：2024/06/01 21:33

我们常见到界面中会出现三角形的对话框，今天我尝试用三种方法，做出了这种效果。
这里写图片描述
以下是实现的三种方式：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            #wrap1{                width:600px;                height:40px;                border:solid 2px brown;                background-color:deeppink;                border-radius:10px;                position:relative;                top:100px;                text-align:center;                line-height:40px;            }            .trian{                -webkit-transform:rotate(45deg);                -moz-transform:rotate(45deg);                -o-transform:rotate(45deg);                transform:rotate(45deg);            }            .trian1{                position:absolute;                left:50%;                bottom:34px;                width:13px;                height:13px;                background:deeppink;                border-left:1px solid brown;                border-top:1px solid brown;            }            #wrap2{                width:600px;                height:40px;                border:solid 1px #000000;                background-color:pink;                border-radius: 10px;                position: relative;                top:200px;                text-align: center;                line-height: 40px;            }            .tria1{                width:0px;                height:0px;                position:absolute;                left:50%;                border-width:16px;                border-style:solid;            }            .tria2{                border-color:transparent transparent  #000000 transparent;                bottom:40px;            }            .tria3{                border-color:transparent transparent  pink transparent;                bottom:39px;            }            #wrap3{                position:relative;                width:600px;                height:40px;                line-height:40px;                background:palevioletred;                border:1px solid purple;                border-radius:4px;                text-align:center;                top:300px;                color:purple;            }            .tria4{                position:absolute;                left:50%;                width:20px;                height:20px;                font:normal 26px "宋体";            }            .tria5{                bottom:35px;                color:purple;            }            .tria6{                bottom:34px;                color:palevioletred;            }        </style>    </head>    <body>        <div id="wrap1">            <span>这是用transform属性字符实现的</span>            <div class="trian trian1"></div>        </div>        <div id="wrap2">            <span>这是用boder实现的</span>            <div class="tria1 tria2"></div>            <div class = "tria1 tria3"></div>           </div>        <div id="wrap3">            <span>这是利用“◆”实现的</span>            <div class="tria4 tria5">◆</div>            <div class = "tria4 tria6">◆</div>          </div>    </body></html>

以下是效果图：
这里写图片描述

这里我比较喜欢border的方法，其实单边框不是矩形

        div{                width:20px;                height:20px;                border-style:solid;                border-width:10px;                border-color:red blueviolet yellow green;            }

效果图这里写图片描述

当我们把div的宽和高变为零的时候，我们发现，会有这样的效果：
这里写图片描述

当我们把边框的颜色设置为透明transparent时，再调整相对位置，就可以达到我们想要的效果。

阅读全文

0 0