迹忆博客
当前位置: 主页 > 学无止境 > WEB前端 > 文章

css绘制三角形和箭头

发布时间: 2021-02-25 作者: 嫣然 浏览次数:

网站中写三角形或者箭头是否还在用图片?下面记录一下用css绘制三角形的方法。

先看一下下面的代码:

<div class="box1"></div>
<br />
<div class="box2"></div>
<style>
.box1{width:0px;height:0px;border:50px solid red;}
.box2{width:0px;height:0px;border-width:50px;border-style:solid;border-color:red green blue yellow;}
</style> 

效果:

在上面的效果中,我们看到了四个三角形,如何得到一个三角形呢?如果其中三个三角形透明,剩余一个三角形。css代码如下:

.box2{width:0;height:0;border-width:20px;border-style:solid;border-color:red transparent transparent transparent;}

效果:

以上就得到了一个三角形,想想其他方向的三角形如何得到呢? 箭头呢?下面附上代码

.arrow{width:50px;height:50px;border-width:2px;border-style:solid;border-color:red red transparent transparent;transform:rotate(45deg);}

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: