CSS能夠讓我們做出各種炫酷的效果,下面我將為大家介紹如何使用CSS制作一個平行四邊形。
.parallelogram{ width: 100px; height: 50px; transform: skew(-20deg); /* 將矩形傾斜20度 */ background-color: #4CAF50; /* 設(shè)置背景顏色 */ color: white; text-align: center; line-height: 50px; /* 讓文字水平垂直居中 */ }
上述代碼中,首先我們創(chuàng)建了一個樣式類parallelogram,接著設(shè)置寬度和高度,但并不僅僅只是這樣,我們還要使用transform屬性來傾斜矩形,讓其成為一個平行四邊形。
最后,我們通過設(shè)置背景色和文字屬性,讓效果更加完美。現(xiàn)在我們只需要在HTML中使用div標簽并為其加上樣式類就可以展示出我們剛剛創(chuàng)建的平行四邊形了。
總結(jié):借助CSS我們可以制作出各種好玩的效果,平行四邊形就是其中之一,當然還有很多其他的效果等待我們?nèi)ヌ剿鳌?/p>
上一篇css做人物簡介