CSS可以實(shí)現(xiàn)各種設(shè)計(jì)，比如在網(wǎng)頁上重疊顯示兩個(gè)三角形。通過對(duì)CSS的靈活運(yùn)用，可以為頁面添加多彩的樣式，同時(shí)增加用戶的體驗(yàn)感。

.arrow {
width: 100px;
height: 100px;
position: relative;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -30px;
border: 30px solid transparent;
border-bottom-color: red;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -30px;
right: -30px;
border: 30px solid transparent;
border-left-color: blue;
}

如上所示，在一個(gè)箭頭的class類里，可以通過偽元素:after和:before實(shí)現(xiàn)兩個(gè)三角形的疊加，其中一個(gè)三角形以紅色為底，另一個(gè)三角形以藍(lán)色為底。同時(shí)，可以通過調(diào)整各個(gè)屬性，比如用border屬性控制三角形的大小，用top、right、left等屬性調(diào)整三角形在頁面的位置。

CSS的特性讓設(shè)計(jì)師能夠創(chuàng)造更復(fù)雜、更有趣的圖形，而入門難度不高。只需要透徹理解CSS語法和思想，并熟練掌握一些常見的CSS屬性，就能使用CSS設(shè)計(jì)出許多酷炫的頁面效果。