html使三角形渐变色,CSS3 简单的三角形渐变效果

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);

html {

background: #222;

font-family: "Julius Sans One", sans-serif;

color: white;

}

html h1 {

text-align: center;

margin: 20px 0 -20px 0;

font-size: 17px;

letter-spacing: 5px;

line-height: 30px;

}

html .explain {

text-align: center;

color: #777;

font-size: 12px;

line-height: 1.5em;

letter-spacing: 1px;

}

html .explain span {

color: #ccc;

}

.key {

text-align: center;

color: #8b156f;

line-height: 1.5em;

font-size: 13px;

letter-spacing: 2px;

padding-bottom: 50px;

}

.key span {

color: #ddd;

}

.tri-test {

position: relative;

overflow: hidden;

background: linear-gradient(-40deg, #8b156f, #18214c);

background: -webkit-linear-gradient(-40deg, #8b156f, #18214c);

background: -moz-linear-gradient(-40deg, #8b156f, #18214c);

width: 80px;

height: 200px;

margin: 50px auto;

}

.tri-test:before,

.tri-test:after {

position: absolute;

content: '';

}

.tri-test:before,

.tri-test:after {

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 200px solid #222;

}

.tri-test:before {

margin-left: -40px;

}

.tri-test:after {

margin-left: 40px;

}

html使三角形渐变色,CSS3 简单的三角形渐变效果相关推荐

android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
Directx11教程(6) 画一个简单的三角形(2)
在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变,如下图所示: 这是因为我们改变了窗口大小,但后缓冲大小在程序初始化时候, ...
html写三角形,css3怎么写三角形？
网页很多时候都应用了css3来写三角形,那么css3要怎么写三角形呢?下面我们来看一下css3写三角形的方法. css3写三角形(为了好区分姑且按方向区别): HTML代码: css代码:/*箭头向上 ...
在html中写三角,css3怎么写三角形？
网页很多时候都应用了css3来写三角形,那么css3要怎么写三角形呢?下面我们来看一下css3写三角形的方法. css3写三角形(为了好区分姑且按方向区别): HTML代码: css代码:/*箭头向上 ...
案例-三角形（CSS3）
案例-三角形(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
【CSS如何画简单的三角形或者梯形】
CSS如何画简单的三角形或者梯形三角形直角三角形梯形直角梯形三角形 1.设置一个盒子,类名为root.将盒子的width和height设置为0px. 盒子不需要设置宽度和高度,由边框bord ...
css实现三角形原来这么简单啊，可以跟三角形图片说拜拜了
在开发网页时经常需要用到三角形做指示效果. [三角形指示效果] 一般我们会让美工提供好三角形的图片然后用在网页中,这种方式用起来简单,但会增加网页的大小,同时要修改三角形大小.颜色等还需要再去麻烦美工 ...
php判断三角形类型,C#_C#判断三角形的类型，题目描述：输入三角形的三 - phpStudy...
C#判断三角形的类型题目描述: 输入三角形的三条边长,判断是否能构成一个三角形(不考虑退化三角形,即面积为零的三角形),是什么样的三角形(直角.锐角.钝角.等边.等腰). 函数声明为:byte Ge ...
蓝桥杯数字三角形java,蓝桥杯数字三角形（java）
题目要求: 问题描述 (图3.1-1)示出了一个数字三角形. 请编一个程序计算从顶至底的某处的一条路径,使该路径所经过的数字的总和最大. ●每一步可沿左斜线向下或右斜线向下走: ●1<三角形行 ...

html使三角形渐变色,CSS3 简单的三角形渐变效果

html使三角形渐变色,CSS3 简单的三角形渐变效果相关推荐

最新文章

热门文章