大家好,又见面了,我是你们的朋友全栈君。
实现原理
将div的高和宽设置为0,然后设置四个border不同的颜色。效果如下:
div#triangle{
width: 0;
height: 0;
border-top: 50px solid blue;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid yellow;
}
若我们只想要一个三角形,可以把其他三个三角形的颜色变白,那就只剩下一个。css中有这样一个属性,transparent,背景透明。这样便可以达到我们的目的了。
border的两倍为三角形的底,border-bottom为三角形的高。
例子如下:
div#triangle01{
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid blue;
}
DEMO
——鼠标经过链接左边出现三角形
css样式
li{list-style: none;}
a{text-decoration: none;}
#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
a:hover{ color:#FF0000;}
#nav a span{border:6px solid #FFFFCC; height:0px; width:0px;
margin:2px 2px 0 -10px; position:absolute;
}
#nav a:hover span{border-left:6px solid #FF3300;}
html代码
<div id="nav">
<ul>
<li><a href=""><span></span>测试文字测试文字</a></li>
<li><a href=""><span></span>测试文字测试文字</a></li>
<li><a href=""><span></span>测试文字测试文字</a></li>
<li><a href=""><span></span>测试文字测试文字</a></li>
<li><a href=""><span></span>测试文字测试文字</a></li>
</ul>
</div>
——鼠标经过三角形旋转
#box {
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: red;
border-bottom: none;
transition: all 1s ease 0s;/*all是所有属性都将获得动画效果 1秒玩完成动画 ease(逐渐变慢)*/
}
#box:hover{
transform: rotate(180deg);/*旋转180度*/
}
<div id="box"></div>
参考文献:
3.css空心三角形
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147439.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...