700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html使三角形渐变色 CSS3 简单的三角形渐变效果

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

时间:2024-02-21 17:29:13

相关推荐

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

CSS

语言:

CSSSCSS

确定

@import url(/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;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。