从前端小白到大佬三角做法

最新推荐文章于 2024-06-19 14:48:22 发布

一只琳娜

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量129

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/my_prince/article/details/108677219

版权

css 三角

此三角其实是对话框上的小三角形，别急，先看一个效果。
在这里插入图片描述
是不是想要这个效果？然后再看一段代码。

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style type="text/css">
        .box {
            width: 0;
            height: 0;
            border-bottom: 50px solid aquamarine;
            border-top: 50px solid black;
            border-left: 50px solid blueviolet;
            border-right: 50px solid brown;
            margin: 0 auto;
        }
        
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-right: 50px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>

</html>

效果：
在这里插入图片描述
就是简单的一个盒子，当他的宽度高度为0时，在设置边框，他就会莫名其妙的变成三角形组合。当我们把不想要看到的地方的边框设置为透明色，剩下的就是我们需要的三角形！且这个时候他的大小是由边框的粗细决定的。
接下来我们试着来做网页中看到的信息框的效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角</title>
    <style>
        .box,
        .box2 {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: rosybrown;
            margin: 50px auto;
        }
        
        .box span {
            position: absolute;
            top: -30px;
            left: 10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 15px solid transparent;
            border-bottom: 15px solid rosybrown;
        }
        
        .box2 {
            border-radius: 10px;
        }
        
        .box2 span {
            position: absolute;
            top: 15px;
            left: 120px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 15px solid transparent;
            border-left: 15px solid rosybrown;
        }
    </style>
</head>

<body>
    <div class="box">

        <span></span>
    </div>

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

</html>

在这里插入图片描述

一只琳娜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到大佬三角做法

css 三角此三角其实是对话框上的小三角形，别急，先看一个效果。是不是想要这个效果？然后再看一段代码。<!doctype html><html><head> <meta charset='UTF-8' /> <title>damoe</title> <style type="text/css"> .box { width: 0;
复制链接

扫一扫