在理论编程中咱们常常会遇到下拉菜单的下三角和一些非凡的图形，那么这些如何用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>展现后果：
发表回复