CSS3 linear-gradient实现三角形

html代码：

<div class="box"></div>

css代码：

.box {position: relative;background: red;height: 200px;
}
.box:before,
.box:after {content: "";position: absolute;height: 200px;width: 50%;bottom: -200px;
}
.box:before {left: 0;background: linear-gradient(to right top,transparent 50%,red 50%,50%);
}
.box:after {right: 0;background: linear-gradient(to left top,transparent 50%,red 50%,50%);
}

效果图如下：
上面为.box本身，下面分为两个三角形是用伪类，具体情况看个人需求。

CSS3 linear-gradient实现三角形相关推荐

css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
CSS3渐变——gradient
渐变是CSS3中的一个新加特性,可以让颜色之间平稳过渡,让页面样式更为炫酷书写渐变属性时,注意添加前缀(不同浏览器的兼容性不同) 线性渐变liner-gradient 沿着一根隐形的轴线,从起点到终 ...
使用css3制作正方形、三角形、扇形和饼状图
1.利用边框制作正方形如果将盒容器的width和height设置为0,并为每条边设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接在一起三角形,它们分别指向不同的颜色. html代码: ...
html5 div 拱桥形状制作,纯CSS3+DIV实现小三角形边框效果的示例代码
具体代码如下所示: html代码是这样的下面用CSS3分别实现向上.下.左.右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30p ...
css3渐变放大CSS3 教程,css3渐变gradient – CSS3高级教程
CSS3的渐变功能允许你在不使用任何图像的情况下创建从一种颜色到另一种颜色的渐变. 使用CSS3渐变 CSS3的渐变特性提供了一个灵活的解决方案来生成两个或多个颜色之间的平滑过渡.早些时候,为了达到这 ...
CSS3 会跳舞的三角形
会跳舞的三角形,这个动效使用了两个动画变换来实现,一个是水平方向的运动,一个是径向的旋转. 在两个方向的运动速度上加以一定的控制,就可以出来不同的舞蹈节奏感. 把这两个三角形换成CSS3卡通图片,可以 ...
css3 transition属性实现三角形
css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值,增强 ...
css3 实现圆角的三角形
达到的效果: 今天碰到这样一个需求,为带有圆角的框加一个角标.而且角标是圆角的. 我真的不想切图,怎么办.突然想到css3可以实现条纹背景,那这不就可以了么 background: linear-gr ...
16.SVG线性渐变（Linear Gradient）
SVG 渐变和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...

CSS3 linear-gradient实现三角形

CSS3 linear-gradient实现三角形相关推荐

最新文章

热门文章