为了账号安全,请及时绑定邮箱和手机立即绑定

用css3实现三角(倒三角)形状图标

废话不多说,直接上代码!

<div id="box"></div>

<style type="text/css">
#box{width:100px; height:150px;margin:200px auto; background:#06F; position:relative}
#box:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-30px;
border-top: 75px solid transparent;
border-left: 30px solid #06f;
border-bottom: 75px solid transparent;}
#box:before{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;left:-30px; background:#06f;
border-top: 75px solid transparent;
border-left: 30px solid #fff;
border-bottom: 75px solid transparent;}
</style>

表现形式:图片描述
解析:
重要属性:transparent(透明的)
文中css我们可以看出图标,左边(before)我们设置了top和bottom都设置了75像素的border宽;left设置了宽30px;
其实就等价于:一个宽高为30X150的长方形!

有人会问,为什么会出现切割状的形状,不应该是上面和下面形状都是长方形吗,因为我们这里上下都等于75px,而这里的border-left就相当于给它加的宽为30px;就相当于从(0,0)开始到(30,75)进行切割,所以,然后就实现了一个四分之一的三角图标;

下面我们给每一块都加上不同的颜色,大家来看看!

<div id="box"></div>

<style type="text/css">
#box{width:100px; height:150px;margin:200px auto; background:#06F; position:relative}
#box:after{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;right:-30px;
border-top: 75px solid #0cf;
border-left: 30px solid #3FC;
border-bottom: 75px solid #f00;}
#box:before{content:"";width:0px; height:150px; position:absolute; box-sizing:border-box;left:-30px; background:#06f;
border-top: 75px solid #f00;
border-left: 30px solid #000;
border-bottom: 75px solid #0cf;}
</style>

图片描述
现在看起来是不是明了很多了,其实还可以实现很多形状,这个得靠自己去计算各种角度!
这种的好处就是和SVG差不多,不管放大多少都不会出现图标模糊;可以自己写几个常用的保存下来,以后直接运用到自己的网页中,还可以支持透明度转换的!

点击查看更多内容
12人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
35
获赞与收藏
926

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消