CSS也可以實(shí)現(xiàn)一些好玩的東西侯嘀，比如我們用CSS實(shí)現(xiàn)一個(gè)三角形。
原理：需要把元素的寬度谱轨、高度設(shè)置為0残拐，然后為其設(shè)置邊框。需要哪個(gè)邊框設(shè)置哪個(gè)邊框的顏色碟嘴，相鄰邊框的顏色設(shè)置color為transparent溪食，對(duì)應(yīng)邊框可以設(shè)置color為transparent也可以不設(shè)置。代碼如下：
效果如下：<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS畫(huà)三角形</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>
用CSS實(shí)現(xiàn)一個(gè)提示框：先設(shè)置好邊緣框娜扇，再畫(huà)一個(gè)三角形定位在邊緣框上错沃，再畫(huà)一個(gè)白色三角形，調(diào)整其定位使其覆蓋掉前面三角形的某一邊雀瓢。代碼如下：
效果如下：<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;
}
/* 設(shè)置白色三角形 /
.triangle:after {
position: absolute;
content: "";
/ 適當(dāng)減小幾個(gè)像素 */
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>
個(gè)人前端學(xué)習(xí)筆記均為原創(chuàng)枢析。
首發(fā)CSDN： Freya_yyy的博客 。歡迎交流和指導(dǎo)刃麸。
我是木風(fēng)醒叁，愿你遇見(jiàn)美好！
