今天我教大家如何用css设计对话框的尖角效果。
对话框的结构：
1，左边的矩形和右边的三角形。
第一步，实现右边的三角形》
<!DOCTYPE html><html><head><meta charset="utf-8"> <style>div{display:block;width:0px;height:0px;border-top:25px solid blue;border-bottom:25px solid red;border-left:25px solid #ccc;border-right:25px solid green;background-color:green;}</style></head><body><div></div></body></html>
先设计一个div,让四周的border都具有一定大小和颜色
我们要的是最左边那个小三角形，那如何去掉其他的三角形呐?
把不需要的border颜色设置成透明色就行了
<!DOCTYPE html><html><head><meta charset="utf-8"> <style>div{display:block;width:0px;height:0px;border-top:25px solid rgba(0,0,0,0);border-bottom:25px solid rgba(0,0,0,0);border-left:25px solid #ccc;border-right:25px solid rgba(0,0,0,0);background-color:none;}</style></head><body><div></div></body></html>
这个小三角就设计完了，接下来我们来做对话框，
对话框就是普通的div样式设计：
<!DOCTYPE html><html><head><meta charset="utf-8"> <style>div.a{display:blockwidth:60px;height:100px;border:2px solid #ccc;padding:12px;float:left;}.b{display:block;width:0px;height:0px;border-top:25px solid rgba(0,0,0,0);border-bottom:25px solid rgba(0,0,0,0);border-left:25px solid #ccc;border-right:25px solid rgba(0,0,0,0);background-color:none;margin-top:35px;float:left;}</style></head><body><div><div class="a">666666666666666666666666666666666666</div><div class="b"></div></div></body></html>
效果如下图》
关于随鼠标移动的小三角代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#b {display: block;width: 0px;height: 0px;border-top: 25px solid rgba(0, 0, 0, 0);border-bottom: 25px solid rgba(0, 0, 0, 0);border-left: 25px solid #ccc;border-right: 25px solid rgba(0, 0, 0, 0);background-color: none;margin-top: 55px;float: left;}ul {float: left;}li {display: block;width: 300px;height: 100px;background-color: #cfc;border: 1px solid #ccc;margin-top: 10px;padding: 12px;}</style></head><body><div><ul><li>老铁666</li><li>1433223</li><li>SharingArk</li><li>Chanke</li></ul><div id="b"></div></div><script>var ulLi = document.getElementsByTagName('ul')[0].getElementsByTagName('li');var tran=document.getElementById('b');for (var i = 0; i < ulLi.length; i++) {ulLi[i].onmouseover = function () {for (var i = 0; i < ulLi.length; i++) {if (ulLi[i] === this) {tran.style.marginTop=ulLi[i].offsetTop+17+'px';}}}}</script></body></html>
效果如下》》》
