css画三角形

全栈程序员站长

发布于 2022-09-07 10:44:27

9370

发布于 2022-09-07 10:44:27

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

实现原理

将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度*/
}