CSS你不知道的border

最新推荐文章于 2021-05-30 20:59:00 发布

MAXLZ

最新推荐文章于 2021-05-30 20:59:00 发布

阅读量418

点赞数

分类专栏：【Web前端】CSS 文章标签： CSS 三角形消息框

本文链接：https://blog.csdn.net/qq_33635385/article/details/82817956

版权

【Web前端】CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

提到CSS的border相信大家一点都不陌生，利用CSS的border可以为元素添加边框，例如，我们为一个id为triangle的元素添加一个边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #triangle{
            width:100px;
            height:100px;
            border:1px solid #000000;
            margin: 0 auto;
        }
    </style>
<body>
    <div id="triangle"></div>
</body>
</html>

效果如下：

效果很简单，现在我们将四个border分别设置不一样的颜色，并加大一下宽度。

再把#triangle的宽度和高度都去掉，就变成了图1-3的效果。

接下来我们将上面的border去掉，变成了面1-4的效果。

然后将左右两边的border设为透明，最终效果如图1-5所示。

最终代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #triangle{
            width:0;
            height:0;
            border-right:50px solid transparent;
            border-bottom:50px solid #ADFF2F;
            border-left:50px solid transparent;
            margin: 0 auto;
        }
    </style>
<body>
    <div id="triangle"></div>
</body>
</html>

通过以上操作我们会得到一个等腰直角三角形（该等腰直角三角形的底边宽度为左右两个border宽度之和），如果我们想得到一个非直角的等腰三角形呢？下面我们进行三角形角度的控制。那么怎么去控制角度呢？一个等腰三角形在不改变底的情况下通过改变高度即可完成对角度的控制。也就是说我们只要将我们得到的三角形变得高一点即可，我们在之前的代码基础上把底部高度变为60px,效果如图1-6所示。

现在我们完成了对三角形角度的控制，接下来我们将得到三角形变为一个等边三角形，只要将高调整为底的 ${\color{Cyan} \sqrt{3}/2}$ 倍即可，此处不做展示。

现在我们利用上面制作三角形的思路，用纯CSS实现一个消息框，效果如图1-7所示。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #message{
            width:150px;
            height:60px;
            position: relative;
            margin:0 auto;
            padding:5px;
            border:1px solid #cccccc;
            border-radius: 5px;
            background: #ffffff;
            filter:drop-shadow(0 0 2px #999999);
        }
        #message:before{
            content: "";
            width:0;
            height:0;
            position: absolute;
            left: -10px;
            top:29px;
            border-top:6px solid transparent;
            border-right:10px solid #cccccc;
            border-bottom:6px solid transparent;
        }
        #message:after{
            content: "";
            width:0;
            height:0;
            position: absolute;
            left: -9px;
            top:29px;
            border-top:6px solid transparent;
            border-right:10px solid #ffffff;
            border-bottom:6px solid transparent;
        }
    </style>
<body>
    <div id="message">hello World!</div>
</body>
</html>

MAXLZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS你不知道的border

提到CSS的border相信大家一点都不陌生，利用CSS的border可以为元素添加边框，例如，我们为一个id为triangle的元素添加一个边框：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/ti
复制链接

扫一扫