用CSS实现三角形及其原理

最新推荐文章于 2024-04-14 08:33:19 发布

Test_晓

最新推荐文章于 2024-04-14 08:33:19 发布

阅读量687

点赞数 6

分类专栏： CSS

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_45473786/article/details/104919090

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

盒子模型

首先要充分了解盒子模型的构造
图片来自百度

原理

各边边框宽度相同

有内容的盒子

在这里CSS样式中的width和height是内容的宽度和高度

<style>
	div {
        width: 40px;
        height: 40px;
        border-top: 20px solid #000;
        border-right: 20px solid red;
        border-left: 20px solid blue ;
        border-bottom: 20px solid greenyellow;
    }
</style>
<body>
  <div></div>
</body>

图示如下：

去掉某一边的边框

这里以去掉下部分边框为例，其它类似

<style>
    div {
        width: 40px;
        height: 40px;
        border-top: 20px solid #000;
        border-right: 20px solid red;
        border-left: 20px solid blue ;
    }
</style>
<body>
  <div></div>
</body>

图示如下：

在这里插入图片描述

去掉内容

去掉内容就是把width和height都置为0，可以看出上下左右边框各为一个三角形

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 20px solid red;
        border-left: 20px solid blue ;
        border-bottom: 20px solid greenyellow;
    }
</style>
<body>
  <div></div>
</body>

图示如下：

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 20px solid red;
        border-left: 20px solid blue ;
    }
</style>
<body>
  <div></div>
</body>

图示如下：

各边边框不尽相同

有内容的盒子

各个边框宽度不同

<style>
    div {
        width: 40px;
        height: 40px;
        border-top: 20px solid #000;
        border-right: 30px solid red;
        border-left: 40px solid blue ;
        border-bottom: 50px solid greenyellow;
    }
</style> 
<body>
  <div></div>
</body>

图示如下：

去掉某一边的边框

这里以去掉下部分边框为例，其它类似

<style>
    div {
        width: 40px;
        height: 40px;
        border-top: 20px solid #000;
        border-right: 30px solid red;
        border-left: 40px solid blue ;
    }
</style> 
<body>
  <div></div>
</body>

图示如下

去掉内容

去掉内容就是把width和height都置为0，可以看出上下左右边框各为一个三角形

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 30px solid red;
        border-left: 40px solid blue ;
        border-bottom: 50px solid greenyellow;
    }
</style> 
<body>
  <div></div>
</body>

图示如下

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 30px solid red;
        border-left: 40px solid blue ;
    }
</style> 
<body>
  <div></div>
</body>

图示如下

三角形

将要展示的三角形设置为某一颜色，其它各个边框的颜色设置为透明（transparent）

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 20px solid red;
        border-left: 20px solid blue ;
        border-bottom: 20px solid greenyellow;
    }
    #div1 {
        width: 0px;
        height: 0px;
        border-top: 20px solid #000;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
    #div2 {
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid red;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }
    #div3 {
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-left: 20px solid blue;
        border-bottom: 20px solid transparent;
    }
    #div4 {
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid greenyellow;
    }
</style>
<body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  <div></div>

</body>

图示如下

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
用CSS实现三角形及其原理

文章目录盒子模型原理各边边框宽度相同有内容的盒子去掉某一边的边框去掉内容各边边框不尽相同有内容的盒子去掉某一边的边框去掉内容三角形盒子模型首先要抽粪了解盒子模型的构造原理各边边框宽度相同有内容的盒子在这里CSS样式中的width和height是内容的宽度和高度<style> div { width: 40px; height: 40px...
复制链接

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。