倒三角形状PHP,用css3实现三角（倒三角）形状图标

最新推荐文章于 2021-11-03 14:07:03 发布

weixin_39622901

最新推荐文章于 2021-11-03 14:07:03 发布

阅读量135

点赞数

文章标签：倒三角形状PHP

本文通过示例代码详细介绍了如何使用CSS的border属性创建一个四分之一三角形图标，并解释了其工作原理。通过改变边框颜色和大小，可以实现不同颜色和形状的图形。这种方法在不失真的情况下提供了类似SVG的体验，适用于网页设计中的图标应用。

摘要由CSDN通过智能技术生成

废话不多说，直接上代码！

#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;}

表现形式：

解析：

重要属性：transparent(透明的)

文中css我们可以看出图标，左边(before)我们设置了top和bottom都设置了75像素的border宽；left设置了宽30px；

其实就等价于：一个宽高为30X150的长方形！

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

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

#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;}

现在看起来是不是明了很多了，其实还可以实现很多形状，这个得靠自己去计算各种角度！

这种的好处就是和SVG差不多，不管放大多少都不会出现图标模糊；可以自己写几个常用的保存下来，以后直接运用到自己的网页中，还可以支持透明度转换的！

打开App，阅读手记

关注