首先：一个例子：
#div1 {
height:20px;
width:20px;
立即学习“前端免费学习笔记（深入）”；
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
此代码的效果图为：
中间白色为宽高各为20px的div1。
那么问题来了，要实现三角号，只需将div宽高设置为0，然后只设置一边的border显示即可
代码如下：
#div2 {
height:0;
width:0;
overflow: hidden;
border:20px dashed transparent;
border-top:20px solid #FF9600;
}
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
267
收藏
