迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 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);}

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

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

热门标签