大家好！今天就来聊聊CSS里的:before和:after这两个属性，主要就是教你如何用它们画出一个小巧的三角形。虽然看似简单，但学会后，你就能让网页变得更加炫酷！别再犹豫了，赶快动手试试！
什么是:before和:after伪类？
别急我马上给你解释什么是Before和After。这俩可是CSS的神奇技能，就跟给HTML元素加个隐形的装饰似的，你看不见，但是网页上就能显示出效果！比如说，用它来放个小图标或小三角，网页立马变美不少。
为什么要用:before和:after输出小三角形？
这三角形代码看起来挺复杂？其实直接上图就行！不过为啥我们要费劲儿用 CSS 画？首先，CSS 画的三角形不需要图片，速度快，网页加载也快；其次，CSS 画的三角形还能随便调整大小和换颜色，比图片方便多了。
如何用:before和:after输出小三角形？
别担心，教你怎么在网页上轻松画出完美三角形！其实很简单，只需要几行CSS代码就行了。首先找到你要画三角形的地方，然后给它加个:before或者:after伪类；接下来把它们的宽度和高度都设置为0；最后用border属性画出三角形就完成。想要知道更多细节？那就赶紧看下面的例子。
实战案例：输出一个简单的小三角形
哥们儿，别想别的，我现在就告诉你怎么用:before伪类快速画出个上跳的小三角。赶紧试下啦～
css
.triangle-up:before {
.tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; }
.tri-left{width: 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-left: 20px solid red;}
.tri-right{width: 0;height:0;border-top:20px solid transparent;border-bottom: 20px solid transparent;border-right: 20px solid red;}
.tri-down{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid red; }
content: '';
display: block;
width: 0;
height: 0;
左边留个50像素透明颜色。
边框右边变白了50像素，透明度调到最高，亲！
下边加个100像素的红色条，就这么简单。
}
我告诉你，我们能做出个只有0的物体，再用 border 属性绘制个三角形玩玩。把两头的边框都去掉，底部那条变红，然后？往上看，一个红色的小小三角形就出来了！
如何调整小三角形的大小和颜色？
搞定三角形后，我们来调整下它的尺寸和颜色，很容易，只需要在边框属性里改几个数字就行。如果觉得三角形不够大，就把 left、right 和 bottom 的数值加大点；想要换个颜色玩玩，直接改 bottom 的颜色值就好。
实战案例：输出一个带边框的小三角形
#demo {
margin: 100px;;
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
} //方框的样式
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%; //根据三角形的位置，可以随意更改。
position: absolute;
width: 0;
}
#demo:after {
border-width: 10px;
border-left-color: #fff;
top: 20px;//根据三角的位置改变
}//此处是一个白色的三角
#demo:before {
border-width: 12px;
border-left-color: #000;
top: 18px;
}此处是一个黑色的三角
//当#demo:after和#demo:before的样式重合以后，由于top值的大小不同，就可以得到中间是白色，但是边框的三角形。如上图。
超简单！我来试试比较复杂点的例子，就用:before 跟 :after两个属性，就能轻松搞定一个带框小三角了！
.triangle-up {
position: relative;
.triangle-up:before,
.triangle-up:after {
position: absolute;
left: 0;
top: 0;
底部都是白色的，厚90像素。
top: 10px;
left: 10px;
咱们换点新的花样儿，试试:before和:after这个伪类，搞定两个红白三角形怎么样？其实，加个边框做个小小三角并不难！
注意事项：避免常见的错误
记住用 :before 和 :after 的时候，content 得有个值才行。要不然小三角会出错哟。而且那个 position，调不好的话，三角形就飞走了。搞程序，细心点儿没错的，千万不能糊弄过去呀
实战案例：输出一个不同方向的小三角形
哎呀别急！你试下正着放和反着放都可以，稍微调整下四个边的位置就妥了。比如想弄个倒挂的小三角？那还不简单吗，把底部挪上去再搬回来就搞定啦～
实战案例：输出一个带阴影的小三角形
别担心，我来告诉你怎么画个带阴影的小三角形。其实超简单，只需要用CSS里的box-shadow属性就可以搞定！代码也不复杂呢：
就是那个小房子样的粉色框，放在中间黑乎乎的，就像有黑色混进去了一样。
这回，咱们用box-shadow给那三角形加点个性色彩！看起来就像个大亮点似的！
搞定接下来咱们聊聊怎么画出炫酷的小三角形。学完之后，你就能轻松驾驭漂亮的网页设计。有疑问或者想法直接在评论区告诉我，马上回答你哈。别忘了点赞和分享
#demo {
margin: 100px;;
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
top: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 10px;
border-top-color: #fff;
left: 20px;
}
#demo:before {
border-width: 12px;
border-top-color: #000;
left: 18px;
}
文章结尾：
不用怕！只用控制元素之间的:before和:after，三角形就能轻松出现。在CSS里，操作就跟拖拽鼠标那么简单！只要稍微调整下边框属性，就能随心所欲地改变三角的大小和颜色啦～ 提高视觉效果，给它加个阴影，马上高大上! 希望我的小小建议能帮到你哦～遇到了什么问题随时欢迎在下方留言提问～ 好期待看到大家用这种方法创造出哪些独具匠心的小三角？快来分享一下你们的奇妙创意！
评论0