css实现三角形

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

原理：

展示结果：

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

展示结果：

VE视频引擎

Android指定名称和路径打包apk

涨姿势了，有意思的气泡 Loading 效果

在前端使用 JS 进行分类汇总

你可能不需要JS！CSS实现一个计时器

「彻底弄懂」this全面解析

学会这些 Web API 使你的开发效率翻倍

用了那么久的 SVG，你还没有入门吗？

VE视频引擎