css实现三角形

最新推荐文章于 2022-12-04 20:38:26 发布

VE视频引擎

最新推荐文章于 2022-12-04 20:38:26 发布

阅读量82

点赞数

分类专栏： VE技术博客文章标签： css html

本文链接：https://blog.csdn.net/weixin_41191739/article/details/120418484

版权

VE技术博客专栏收录该内容

45 篇文章 3 订阅

订阅专栏

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用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>

展示结果：

在这里插入图片描述

VE视频引擎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现三角形

在实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用css来实现呢？例1例2例3原理：仔细想想，原理非常简单，利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻border会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜
复制链接

扫一扫