利用css制作三角形
利用设置边框的三个边的长度和border实现三角形设置，并隐藏其他边
例子：#yz3{
display: inline-block;
0;
height: 0;
border-top: 5px solid transparent;
border-left: 6px solid #F3D995;
border-bottom: 5px solid transparent;
}
HTML拖拽事件（两大种，七小种）
一、原对象事件（被拖拽事件）
ondragstart 拖拽开始
ondrag 拖拽过程
ondragend 拖拽结束
二、目标元素事件（进入的元素）
ondragenter 进入目标元素
ondragover 目标元素上移动
ondragleave 离开目标元素
ondrop 在目标元素上释放
（阻止浏览器默认事件）
例子：
<style>
#drag{
150px;
heigh:150px;
background:blue;
}
#box{
500px;
heigh:150px;
border:3px red soild
magin:100px auto
}
</style>
//变为可拖动
<div id='drag' draggable="true"></div>
<div id='box'></div>
var oDrag=document.getElementById('drag');
var oBox=document.getElementById('drag');
//原对象事件
//拖拽开始变色
oDrag.ondragstart=function(){
this.style.background='green'；
}
//拖拽变色
oDrag.ondrag=function(){
this.innerHTML=‘被拖拽中....’
}
//松开鼠标时改回原色
oDrag.ondragend=function(){
this.style.background='blue'；
}
//目标元素事件
//进入时改变颜色
oBox.ondragenter=function(e){
e.preventDefault()//阻止浏览器的默认事件
this.style.background='yellow'
}
//移动时改变颜色
oBox.ondragover=function(){
e.preventDefault()//阻止浏览器的默认事件
this.style.background='red'
}
//鼠标离开时变色
oBox.ondragleave=function(){
this.style.background='none'
}
//鼠标释放时变色
oBox.ondrop=function(){
this.style.background='blue'
}