CSS—三角

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

木木学长

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

阅读量77

点赞数

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

本文链接：https://blog.csdn.net/qq_43599049/article/details/115068890

版权

CSS 三角形边框网页设计图形绘制

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

网页中常见的一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标：
在这里插入图片描述

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

<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid green;
            border-left: 10px solid blue;
        }
        
        .box2 {
            margin-top: 50px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top: 10px solid pink;
        }
    </style>
</head>

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

</html>

构造直角三角形，先把border-bottom去掉，再把border-top改高：
在这里插入图片描述

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

<head>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 200px solid transparent;
            border-right: 100px solid red;
            /* border-bottom: 100px solid green; */
            border-left: 100px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>