用css如何实现三角形

ztj100 2025-01-20 18:19 12 浏览 0 评论

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用css来实现呢？

例1

例2

例3

原理：

仔细想想，原理非常简单，利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻border会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是你设置颜色的边框。

<style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

如果想要不同方向的三角形，只需要改变所需的边框颜色，另外三条边改为transparent(透明)。那么我们就能很简单地实现例1和例3的效果。

一些不规则的三角形只需要改变边框的宽度就可以得到不同形状的三角形

<style>
        div{
            width: 0px;
            height: 0px;
            border-width: 0px 0px 200px 100px;
            border-style: solid;
            border-bottom-color:green ;
            border-left-color:transparent;
        }
</style>
</head>
<body>
  <div></div>
</body>

展示结果：

css 梯形

上一篇：css 实现各种多边形图案
下一篇：气疯了，28个三菱PLC系列的常见问题，每个都是踏错的路

用css如何实现三角形

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

用css如何实现三角形

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

如何发个 npm 包?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

让Jenkins自动部署你的Vue项目「实践」

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起