<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 0px; height: 0px; border: 30px solid white; border-bottom: none; border-top-color:blue; /*下一条属性没学过，别瞎研究：*/ transition:all 1s ease 0s; } /*下一条属性没学过，别瞎研究：*/ div:hover{ transform:rotate(180deg); } </style> </head> <body> <div></div> </body> </html>
注意：单纯写border-top:30px solid white;这一条语句是没有效果的，必须向上面一样写三条
原文：https://www.cnblogs.com/ustc-yy/p/12132533.html