#bottom{width:0px;height:0px;border-left:30pxsolid#FFFFFF;border-top:30px#FF6699solid;border-right:30pxsolid#FFFFFF;}#top{width:0px;height:0px;border-left:30pxsolid#FFFFFF;border-bottom:30px#FF6699solid;border-right:30pxsolid#FFFFFF;}#rt{width:0px;height:0px;border-left:30pxsolid#FFffff;border-bottom:30px#ff6699solid;}#lt{width:0px;height:0px;border-right:30px#FFffffsolid;border-bottom:30pxsolid#FF0000；}下上右下左下。
1.可以用css3的border-radius属性来实现，支持ie9+<style>.dm{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolid#00897B;}.dm1{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-top:100pxsolid#00897B;margin-top:20px;}.dm2{width:0;height:0;border-top:50pxsolidtransparent;border-right:100pxsolid#00897B;border-bottom:50pxsolidtransparent;margin-top:20px;}.dm3{width:0;height:0;border-top:50pxsolidtransparent;border-left:100pxsolid#00897B;border-bottom:50pxsolidtransparent;margin-top:20px;}.dm4{width:0;height:0;border-top:100pxsolid#00897B;border-right:100pxsolidtransparent;margin-top:20px;}.dm5{width:0;height:0;border-top:100pxsolid#00897B;border-left:100pxsolidtransparent;margin-top:20px;}.dm6{width:0;height:0;border-bottom:100pxsolid#00897B;border-right:100pxsolidtransparent}.dm7{width:0;height:0;border-bottom:100pxsolid#00897B;border-left:100pxsolidtransparent;}</style>。
1、新建一个html5网页，名称为index.html，在<body>；代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：
<divclass="triangle-up"><；！--向上的三角--></div>
<divclass="triangle-down"><；！--向下的三角--></div>
<divclass="triangle-left"><；！--向左的三角--></div>
<divclass="triangle-right"><；！--向右的三角--></div>
2、然后新建一个css文件style.css，并在index.html中引入，引入代码：<linkrel="stylesheet"type="text/css"href="style.css">
3、先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：
第一种：.triangle-up{
width:0;
height:0;
border-left:30pxsolidtransparent;
border-right:30pxsolidtransparent;
border-bottom:30pxsolid#fff;
}
第二种：.triangle-up{
width:0;
height:0;
border:30pxsolidtransparent;
border-bottom-color:#fff;
}
4、接下来写向下的三角形，继续在css文件中输入以下代码：
.triangle-down{
width:0;
height:0;
border-left:20pxsolidtransparent;
border-right:20pxsolidtransparent;
border-top:20pxsolid#0066cc;
}
5、然后是向左的三角形，代码为：
.triangle-left{
width:0;
height:0;
border-top:30pxsolidtransparent;
border-bottom:30pxsolidtransparent;
border-right:30pxsolidyellow;
}
6、最后是向右的三角形，代码为：
.triangle-right{
width:0;
height:0;
border-top:50pxsolidtransparent;
border-bottom:50pxsolidtransparent;
border-left:50pxsolidgreen;
}
用线性滤镜就行background:linear-gradient(135deg,rgba(0,0,0,0)34px,red36px);background:-o-linear-gradient(135deg,rgba(0,0,0,0)34px,red36px);background:-moz-linear-gradient(135deg,rgba(0,0,0,0)34px,red36px);background:-webkit-linear-gradient(135deg,rgba(0,0,0,0)34px,red。
<divstyle="width:200px;height:174px;-webkit-clip-path:polygon(50%0,0100%,100%100%);clip-path:polygon(50%0,0100%,100%100%);text-align:center;line-height:300px;color:#fff;background-color:red">；等边三角形</div>
<divstyle="width:200px;height:100px;-webkit-clip-path:polygon(50%0,0100%,100%100%);clip-path:polygon(50%0,0100%,100%100%);text-align:center;line-height:175px;color:#fff;background-color:red">；等腰直角三角形</div>