CSS也可以实现一些好玩的东西，比如我们用CSS实现一个三角形。
原理：需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的颜色设置color为transparent，对应边框可以设置color为transparent也可以不设置。代码如下：
效果如下：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS画三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid #ff0000;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</div>
</body>
</html>
image.png
用CSS实现一个提示框：先设置好边缘框，再画一个三角形定位在边缘框上，再画一个白色三角形，调整其定位使其覆盖掉前面三角形的某一边。代码如下：
效果如下：<style>
.triangle {
position: relative;
width: 100px;
height: 50px;
border: 1px solid #5b5b5b;
border-radius: 5px;
}
.triangle:before {
position: absolute;
content: "";
top: -10px;
left: 20px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #5b5b5b;
}
/* 设置白色三角形 /
.triangle:after {
position: absolute;
content: "";
/ 适当减小几个像素 */
top: -9px;
left: 20px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
image.png
个人前端学习笔记均为原创。
首发CSDN：Freya_yyy的博客。欢迎交流和指导。
我是木风，愿你遇见美好！
网友评论