利用css制作三角形

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

weixin_47304385

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

阅读量750

点赞数 1

分类专栏： css页面布局文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47304385/article/details/125123940

版权

css页面布局专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.首先制作一个正方形只设置边框
在这里插入图片描述
2.除了上边框其它边框都设置透明色(transparent)

<style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid;
            border-top-color: red;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>

4.将div的宽度设置为0这样就制作出了三角形

  <style>
        div {
            width: 0px;
            height: 100px;
            border: 10px solid;
            border-top-color: red;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>

在这里插入图片描述
5.扩展制作直角三角形

5.1 首先制作一个正方形只设置边框

5.2 将宽高都设置为0

在这里插入图片描述

 <style>
        div {
            width: 0px;
            height: 0px;
            border: 20px solid;
            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: pink;
            border-left-color: purple;
        }
    </style>

5.3将上边框和右边框设置为透明色这样直角三角形就制作成功了

 <style>
        div {
            width: 0px;
            height: 0px;
            border: 20px solid;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: pink;
            border-left-color: purple;
        }
    </style>