整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
实际编程中我们经常会遇到下拉菜单的下三角和一些特殊的图形，那么这些如何用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实现。还是一样先上全代码，在逐步解析。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.title {
position: relative;
padding-left: 16px;
}
.title::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid;
border-color: transparent transparent transparent red;
top: 50%;
left: 0;
margin-top: -8px;
}
</style>
<body>
<div class="title">css实现三角形</div>
</body>
</html>最终效果+元素查看
1.用div写一个标题
<div class="title">css实现三角形</div>2.标题样式。
设置相对定位，并设置内边距，给三角形留下空间
.title {
position: relative;
padding-left: 16px;
}3.三角形样式
这里用到了 ::before 伪类元素，简单解释下，他会在元素（本代码中为“title”）内容前插入新的内容（本代码content中的内容为空）。
重点：不设置元素的宽高，只设置4边的宽度和颜色结果如下图
给元素4边都设置颜色和宽度
// 4边都设置颜色
.title::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid;
border-color: blue green yellow red;
top: 50%;
left: 0;
margin-top: -8px;
}通过让其他3边颜色透明就能实现三角形效果，给需要显示的三角形的边线设置颜色。
（tip:三角形的总高是上下边线宽度之和，所以偏移一半高度居中）
做网页很多时候我们需要使用一个类似下拉菜单的三角形图标，虽然用图片和其他方法也可以实现，但是修改起来不方便，所以一般使用纯CSS的方法来实现。
1.利用 border 属性实现三角形
这个原理很简单，我们先看下面的图，这是一个边框为 20px 的 div，看他的边框，是个梯形，变化会从这里开始。
把它的宽和高都设为 0，效果如下图：
四个边框都变成三角形了，现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了。
注意：IE6下把边框设置成 transparent 时会出现黑影，并不会透明，把 border-style 设置成 dashed 可以解决。
这样，一个三角形就出来了！
2、利用 CSS3 transfrom 旋转 45 度实现三角形
先创建一个带 border 的 div ，设置好背景色和相邻的两个边框的颜色，然后选择 45 度。
注：IE6下无效。
实现样式代码：
*请认真填写需求信息，我们会在24小时内与您取得联系。
