使用CSS画三角形

最新推荐文章于 2024-07-29 09:40:43 发布

昵称太难想

最新推荐文章于 2024-07-29 09:40:43 发布

阅读量219

点赞数

分类专栏： CSS 文章标签： CSS 图形绘制三角形边框网页设计

本文链接：https://blog.csdn.net/qq_43739752/article/details/119214920

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

日常使用css多半是为HTML添加样式，使之更加美观，或是实现某些功能。日常对css的使用会让我们感到无趣，但其实css还能够实现许多有趣且令人感到意外的功能。因为在网页的设计过程中有道的很多是盒模型，这也使得网页上的图案多半是方的或是圆的；不知道大家是否想过画出其他的图形呢，例如五边形、六边形或是 ……三角形

画出三角形

<!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>画三角形</title>
    <style>
        .triangle{
            width: 0px;
            height: 0px;
            border: 100px solid rgb(30, 206, 133);
            border-bottom-color: transparent;
            border-left-color:transparent;
        }
       
    </style>
</head>
<body>
<div class="triangle"></div>  
</body>
</html>

画出来的三角形如下图：
在这里插入图片描述

原理

画三角形原理很简单，主要利用了border的性质。当我们为一个盒子添加边框时，看似是盒子的四周各添加了一条线，但实际上是盒子的四周各添加了一个梯形。

<!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>画三角形</title>
    <style>
     .triangli{
    width: 50px;
    height: 50px;
    border: 200px solid ;
    border-top-color: rgb(30, 156, 206);
    border-bottom-color: green;
    border-left-color:pink;
    border-right-color: rgb(30, 206, 133);   
}   
    </style>
</head>
<body>
 <div class="triangli"></div>
</body>
</html>

在这里插入图片描述
当盒子的大小为0时，各边边框就会成为一个三角形

<!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>画三角形</title>
    <style>
     .triangli{
    width: 0px;\\ 盒子大小为0
    height: 0px;
    border: 200px solid ;
    border-top-color: rgb(30, 156, 206);
    border-bottom-color: green;
    border-left-color:pink;
    border-right-color: rgb(30, 206, 133);   
}   
    </style>
</head>
<body>
 <div class="triangli"></div>
</body>
</html>

在这里插入图片描述

利用这个原理可以画出等边三角形和直角三角形。画等边三角形，则把上图中不要的3个三角形的颜色设置为透明，例如我要留下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>画三角形</title>
    <style>
     .triangli{
    width: 0px;\\ 盒子大小为0
    height: 0px;
    border: 200px solid ;
    border-top-color: rgb(30, 156, 206);
    border-bottom-color: transparent;// 对应3号
    border-left-color: transparent;// 对应4
    border-right-color: transparent;// 对应2号
}   
    </style>
</head>
<body>
 <div class="triangli"></div>
</body>
</html>

若要画直角三角形，则保留相邻的任意两个三角形（1 2或2 3或3 4或4 1）将他们的颜色设置相同，根据自己的需求确定保留的两个三角形。例如开篇所举的例子

昵称太难想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS画三角形

引言日常使用css多半是为HTML添加样式，使之更加美观，或是实现某些功能。日常对css的使用会让我们感到无趣，但其实css还能够实现许多有趣且令人感到意外的功能。因为在网页的设计过程中有道的很多是盒模型，这也使得网页上的图案多半是方的或是圆的；不知道大家是否想过画出其他的图形呢，例如五边形、六边形或是 ……三角形画出三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录