Css三角形 div全屏 半透明
1. 三角形的制作
方法一：
对于这样一个 <div id="boder_arrow"></div>，使用#boder_arrow{border-left-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;lineheight:0}，
效果如图：
当然，我们可以通过改变border-color的属性值（如transparent）来得到四个三角形中的任意一个，也可以通过改变各个方向的border-width(如border-top-width等)来改变三角形的角度。如：border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;
方法二：
通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持。
2.让Div充满整个浏览器屏幕
由于html ，body，div标签默认的高度都是随着内容的变化而变化的，所以我们需要从外到内设置他们的height样式才可以使div充满整个浏览器屏幕：<html style="height:100%"⋯⋯<body style="height:100%"⋯⋯<div style="100%"⋯
3.实现半透明效果
方法一：使用半透明图片（*.png/.gif）作为元素背景；
方法二：使用transparent实现透明，使用滤镜（只能在IE显示效果）实现半透明：filter:Alpha(opacity=0.3),Js实现代码为：
document.getElementById("myElement").style.filter= "alpha(opacity=40)";// 针对IE
方法三：Html5新属性：rgba(r,g,b,opacity)和opacity都可以设置元素的透明度;
方法四：使用JQuery设置和改变CSS透明度
直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：
$( " #myElement " ).css({ opacity: . 4 });
// 所有浏览器有效
您也可以使用一下jQuery代码使一个元素动画透明：
$( " #myElement " ).animate({
opacity: . 4
}, 1000 , function () {
// 动画完成，所有浏览器下有效
});
不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。
如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。