CSS是前端開發(fā)中一個(gè)重要的技術(shù)，它可以讓我們實(shí)現(xiàn)各種炫酷的效果，本文介紹如何通過CSS實(shí)現(xiàn)鼠標(biāo)劃過變?yōu)槿切蔚男Ч?/p>

/* 定義正方形 */
.square {
width: 100px;
height: 100px;
background-color: #ccc;
}
/* 定義三角形 */
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent; /* 上下箭頭長度 */
border-bottom: 50px solid transparent;
border-right: 50px solid #cc0033; /* 右邊箭頭長度 */
transform-origin: left;
transform: rotate(-45deg); /* 旋轉(zhuǎn)45度 */
}
/* 鼠標(biāo)劃過觸發(fā)效果 */
.square:hover .triangle {
display: inline-block;
}

首先，我們定義一個(gè)正方形的樣式，它是我們的“容器”，用來包含鼠標(biāo)劃過后顯示的三角形。然后，我們定義一個(gè)三角形的樣式，由于CSS本身不支持繪制三角形，所以我們采用邊框的方式繪制。接著，我們將三角形的寬高設(shè)為0，邊框設(shè)為三角形長度。為了讓三角形可以旋轉(zhuǎn)，我們將transform-origin設(shè)置為左側(cè)，transform設(shè)置為旋轉(zhuǎn)-45度。

接著，我們?cè)谡叫蔚?hover偽類中，將三角形的display屬性設(shè)置為inline-block，這樣在鼠標(biāo)劃過時(shí)，三角形才會(huì)顯示出來。

通過這樣的方式，我們可以實(shí)現(xiàn)鼠標(biāo)劃過變?yōu)槿切蔚男ЧＭ疚目梢詫?duì)大家有所幫助。