css绘制三角形

最新推荐文章于 2024-10-04 12:59:34 发布

哲子君

最新推荐文章于 2024-10-04 12:59:34 发布

阅读量128

点赞数 1

分类专栏：盒模型文章标签： css

本文链接：https://blog.csdn.net/zhzijun/article/details/108490693

版权

盒模型专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先在html中创建一个div

<div class="kuang"></div>

在css中绘制一个边长为 100px 的正方形，border 宽度为 10px

.kuang{
            width: 100px;
            height: 100px;
      }

再给盒子设置一个宽度，并且让他居中显示

.kuang{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            border: 100px solid;
            
      }

然后利用三原色给边框设置上你喜欢的颜色

.kuang{
            width: 100px;
            height: 100px;
            margin: 100px auto;
            border: 100px solid;
            border-left-color: rgb(167, 0, 250);
            border-right-color: rgb(16, 247, 247) ;
            border-top-color: rgb(0, 255, 0);
            border-bottom-color: rgba(255, 0, 0);
            
      }

然后你就可以得到一个这样的这样子的图形啦（ps.小编审美感不强别介意我设置的颜色，QAQ）
在这里插入图片描述
接下来就开始魔法表演了让我们把宽度设置为0，把其他边框的颜色设置为透明

            width: 0px;
            height: 100px;
            margin: 100px auto;
            border: 100px solid;
            border-left-color: rgba(167, 0, 250, 0);
            border-right-color: rgba(16, 247, 247, 0) ;
            border-top-color: rgba(0, 255, 0, 0);
            border-bottom-color: rgba(255, 0, 0);

然后见证奇迹的时刻到了
在这里插入图片描述
就这样，我们的三角形就出来了，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .kuang{
            width: 0px;
            height: 100px;
            margin: 100px auto;
            border: 100px solid;
            border-left-color: rgba(167, 0, 250, 0);
            border-right-color: rgba(16, 247, 247, 0) ;
            border-top-color: rgba(0, 255, 0, 0);
            border-bottom-color: rgba(255, 0, 0);
        }
    </style>
</head>
<body>
    <div class="kuang"></div>
</body>
</html>