.test{ width:0;height:0;margin:0 auto;border:6px solid transparent;border-top: 6px solid red;}
查看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制基本图形</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
/* right: 100px; */
}
.box1{
width: 0;
height: 0;
border-left: 50px solid rgba(0,0,255,0);
border-right: 50px solid rgba(0,255,0,0);
border-bottom: 100px solid rgba(255,0,0);
position: absolute;
left:100px;
top:150px;
transition: all 0.8s linear;
}
.box1:hover {
border-bottom: 100px solid rgba(0,222,14);
transition: all 0.8s linear;
}
h2 {
color: aqua;
font-weight: 700;
display: inline-block;
transition: all 0.8s linear;
}
h2:hover {
color: red;
font-weight: 700;
transition: all 0.8s linear;
}
</style>
<body>
<!-- <div id="box"></div> -->
<div class="box1"></div>
<div class="f">
<h2>
符攀飞
</h2>
</div>
</body>
</html>
