笔试题中经常遇到用css实现某个div边框添加三角形问题，掌握一点，合理利用div的边框，当div有宽有高时，边框就是不起眼的边框，当div的宽高为0时，边框就是一个小方块，把剩下的三个边透明就是神奇的三角形了。
然后就是考察CSS的：before和：after伪元素，此类问题一般分为两种类型，即实心和空心问题，如图所示。
下图中DOM结构均为：
1、 实心三角
立即学习“前端免费学习笔记（深入）”；
此类问题，一般给出背景颜色（多数为深色），没有整体图形的边框，比较容易下手。思路很简单，整体div背景色，确定长宽，相对定位，再用：after伪元素在div后添加内容（空格），设置宽度为0，确定边框宽度，绝对定位就行。
#demo{ width: 100px; height: 100px; background-color: #333; position: relative; }#demo:after{ border:solid transparent; border-left-color:#333; border-width:10px; width:0; content:" "; position:absolute; left:100%; top:10%; }2、 空心三角
对于空心三角，设计思路和实心三角类似，可以看成两个实心三角，外层大三角是设定为整体边框颜色的实心三角，内层小三角是设定为白色的实心三角，外层宽度大于内层宽度，视觉上就是空心三角。关键就是：before和：after伪元素分别对应外层大三角和内层小三角，以及边框大小计算。注意视觉上先看到的是：after伪元素样式，然后是：before伪元素样式，即当两者重合时，：after伪元素在最先看到。
对于上图的空心三角形设计（border-width:2px），代码如下：
#demo{ width: 100px; height: 100px; background-color:#fff; position:relative; border: 2px solid #000; /*整体颜色边框是黑色*/}/*小三角*/#demo:after{ border:solid transparent; border-left-color:#fff; border-width:10px; content:" "; position:absolute; left:100%; top:20px; /*20px*/}/*大三角*/#demo:before{ border:solid transparent; border-left-color:#000; border-width:12px; /*10px+2px*/ content:" "; position:absolute; left:100%; top:18px; /*20px-2px*/}说明一点，在CSS3中，:before 和 :after 伪元素表示为 ::before 和 ::after 形式，为了兼容IE8，建议还是写单冒号。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
885
收藏
