CSS样式制作三角形的方法

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

野性的鬼

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

阅读量1.5k

点赞数 2

分类专栏： # CSS 文章标签： css 前端 html5 html 前端框架

本文链接：https://blog.csdn.net/qq_41908279/article/details/123876236

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章分享利用容器边框制作直角三角形和等腰直角三角形的方法。

一、等腰直角三角形的制作：

第一步：

在body标签中写一个空的容器；
然后再css样式中，给该容器设置宽高为零；
将边框设置为可见的实线或虚线样式；
然后为容器的边框设置宽度；（为了容易区分四个边，可以给四个边设置不同的颜色，以便更好的区分）

<style>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red green blue purple;
        }
    </style>
<body class="clear">
    <div class="triangle">

    </div>

</body>

从效果图可以看出边框宽度和颜色的排列方式是——上-右-下-左的顺时针方向，记住这个方式方便下边的操作。

第二步：

再上图中，选择你想要的方向的等腰直角三角形，如果想要保留左边的，就将右边框宽度设置为零，类似地，如果想要保留右边就将左边框宽度设置为零，这样做的原因是——为了让多余的边框不占据位置；下面我以下边蓝色的三角形为例：将上边框宽度设置为零；
```
<style>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0px 100px 100px 100px;
            border-color: red green blue purple;
        }
    </style>
```

从效果图可以看出上边框已经不占据空间；

第三步：

然后将你的想要的三角形多出来的两部分边框颜色设置为透明（transparent）；代码如下：


<style>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0px 100px 100px 100px;
            border-color: red transparent blue transparent;
        }
    </style>

如上：就可以显示出等腰三角形的效果图；

二、直角三角形的制作

在以上等腰直角三角形的制作基础上，将你的等腰直角三角形不想保留的一半直角三角形取消，并让它不占据空间；

取消的方法是：将不想要保留的一半边距宽度设置为零；

<style>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0px 0px 100px 100px;
            border-color: red transparent blue transparent;
        }
    </style>

如上效果图：我是将左边直角三角形保留，所以将右边框宽度设置为0px；

如果你想将其他边保留，可以将对应多余出来的一边宽度设置为0；

三、总结图：

边框属性总体设置的顺序：

直角三角形上下左右的区分：

总结：

后期应该还会学习更多的方法制作三角形；会继续补充。

野性的鬼

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS样式制作三角形的方法

该文章分享利用容器边框制作直角三角形和等腰直角三角形的方法。目录一、等腰直角三角形的制作：第一步：第二步：第三步：二、直角三角形的制作三、总结图：总结：一、等腰直角三角形的制作：第一步：在body标签中写一个空的容器；然后再css样式中，给该容器设置宽高为零；将边框设置为可见的实线或虚线样式；然后为容器的边框设置宽度； ...
复制链接

扫一扫