网站个人备案步骤业务员用什么软件找客户
本篇教程探讨了HTML5如何实现尖角号，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
<
首先，来写一个简单的代码：
html>
Title.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px;
border-color:#f00 #0f0 #00f #000;
}
我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做可爱的小尖角了。我们只要把不需要的三边的边框(三角形)的颜色设置为与背景相同即可，这样就只能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。具体代码如下所示：
html>
Titlebody {
background:#4D4948;
}
.send {
position:relative;
/*父类用相对位置*/
width:150px;
height:35px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:30px auto 0;
}
.send .arrow {
position:absolute;
/*子类用绝对位置*/
top:5px;
/*向下移动五个像素*/
right:-16px;
/*调试三角的位置*/
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#4D4948 #4D4948 #4D4948 #F8C301;}
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！