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

最新推荐文章于 2023-04-17 16:46:17 发布

liuxiaoyu108

最新推荐文章于 2023-04-17 16:46:17 发布

阅读量880

点赞数

分类专栏： HTML+CSS 文章标签：布局三角形

本文链接：https://blog.csdn.net/Candice_L/article/details/77755050

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!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;
            }