共计 796 个字符，预计需要花费 2 分钟才能阅读完成。
在理论编程中咱们常常会遇到下拉菜单的下三角和一些非凡的图形，那么这些如何用 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>展现后果：
正文完
