html中实现对角线颜色渐变,CSS3基础知识 - 对角线渐变色的几何图形

CSS

语言：

CSSSCSS

确定

.shape {

display: block;

height: 150px;

width: 150px;

color: #ffbb01;

}

.triangle {

background: transparent;

position: relative;

}

.triangle:before {

content: '';

display: block;

border: 150px solid transparent;

border-width: 150px 75px;

border-top-width: 0;

border-bottom-color: currentColor;

}

.triangle:after {

content: '';

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 50%;

background: #ffcc01;

-webkit-clip-path: polygon(0px 150px, 75px 150px, 75px 0px);

clip-path: polygon(0px 150px, 75px 150px, 75px 0px);

}

.square {

background: -webkit-linear-gradient(315deg, #ffcc01, #ffcc01 50%, currentColor 50%, currentColor 100%);

background: linear-gradient(135deg, #ffcc01, #ffcc01 50%, currentColor 50%, currentColor 100%);

}

.circle {

border-radius: 50%;

background: -webkit-linear-gradient(left, #ffcc01, #ffcc01 50%, currentColor 50%, currentColor 100%);

background: linear-gradient(left, #ffcc01, #ffcc01 50%, currentColor 50%, currentColor 100%);

/* Stage Styles */

}

html,

body {

height: 100%;

}

body {

background: #f0f3f5;

margin: 0;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.stage {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

width: 500px;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}