CSS制作聊天框样式（CSS实现聊天框的三角、CSS画一个三角）

最新推荐文章于 2023-10-24 17:41:19 发布

靡_初

最新推荐文章于 2023-10-24 17:41:19 发布

阅读量959

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/kettlo/article/details/115380074

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.用到的知识：

定位、盒子边框。效果类似下图：

在这里插入图片描述

2.盒子边框

主要问题在于怎么用CSS画出三角形，在此之前需要理解盒子的边框特点。
如果给一个盒子不设置大小，只设置边框样式如下。（分别给盒子各边框不同的颜色）

<body>
    <div class="box">

    </div>
</body>

.box {
    width: 0;
    height: 0;
    border-top: 100px solid green;
    border-right: 100px solid red;
    border-bottom: 100px solid blue;
    border-left: 100px solid yellow;
}

在这里插入图片描述
到了这里大家应该都明白了。

3.方法：

给一个没有大小的盒子只设置边框，颜色为透明色(transparent)。再设置其中一个边框的颜色就可以做出三角形了。

注意：

子绝父相
要作为三角形的盒子必须没有大小。
如果你要向上的三角形就需要只给下边框设置颜色，其它边框透明。

<div class="box2">

</div>

.box2 {
    width: 0;
    height: 0;
    /* 兼容 */
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

4.一个实例

<body>
    <div class="jingdong">
        <span></span>
    </div>
</body>

.jingdong {
    margin: 100px auto;
    position: relative;
    width: 300px;
    height: 200px;
    background-color: green;
}

.jingdong span {
    position: absolute;
    right: 30px;
    top: -20px;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-bottom-color: green;
}

在这里插入图片描述

靡_初

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS制作聊天框样式（CSS实现聊天框的三角、CSS画一个三角）

1.用到的知识：定位、盒子边框。效果类似下图：2.盒子边框主要问题在于怎么用CSS画出三角形，在此之前需要理解盒子的边框特点。如果给一个盒子不设置大小，只设置边框样式如下。（分别给盒子各边框不同的颜色）<body> <div class="box"> </div></body>.box { width: 0; height: 0; border-top: 100px solid green;
复制链接

扫一扫