如何利用css来制作三角形

最新推荐文章于 2024-08-14 22:20:14 发布

simple-xiao

最新推荐文章于 2024-08-14 22:20:14 发布

阅读量1.2k

点赞数 1

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

本文链接：https://blog.csdn.net/simple_Xsg/article/details/124133576

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何通过设置CSS边框来制作三角形。首先创建一个宽高为0的盒子，然后设置不同方向的边框宽度、样式和颜色。通过调整透明边框，可以截取所需方向的三角形。总结了利用边框样式实现三角形的基本方法。

摘要由CSDN通过智能技术生成

1. 首先我们先准备一个盒子，让盒子的宽高等于零，分别给定四个方向的边框大小、实线、边框颜色；让边框来充当内容。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            margin: 0 auto;
            border-top: 100px solid palegreen;
            border-right: 100px solid peru;
            border-bottom: 100px solid purple;
            border-left: 100px solid pink;
        }
    </style>
</head>

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

</html>

得到的是这样一个四个方向的三角形样式：

2. 截取需要哪个方向的三角形，就保留需要截取三角形的颜色，将其余方向的边框颜色设为透明色；

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2 {
            width: 0;
            height: 0;
            margin: 0 auto;
            /* 给定四个边框大小、实线、这里为了隐藏将边款颜色设置为透明色 */
            border: 100px solid transparent;
            /* 给需要留下的边框给定边框颜色，让其显示出来 */
            border-top-color: palegreen;
        }
    </style>
</head>

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

</html>

保留上边框的颜色，这样我们就能得到三角形样式了：