css光线,CSS3 光线的分解示意图

CSS

语言：

CSSSCSS

确定

body {

background: black;

overflow: hidden;

/*svg{display:none;}*/ }

div#triangle {

position: relative;

width: 0;

height: 0;

top: 200px;

left: 400px;

background: transparent;

border-width: 0 225px 400px;

border-style: solid;

border-color: transparent transparent white; }

div#triangle:before {

position: absolute;

content: "";

width: 0;

height: 0;

top: 0;

left: -225px;

background: transparent;

border-width: 0 225px 400px;

border-style: solid;

border-color: transparent transparent black;

-webkit-filter: blur(15px);

-moz-filter: blur(15px);

-ms-filter: blur(15px);

-o-filter: blur(15px);

filter: blur(15px);

filter: url(#blur);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); }

div#light {

position: relative;

width: 8px;

height: 700px;

background: white;

-webkit-transform: rotate(75deg);

-moz-transform: rotate(75deg);

-ms-transform: rotate(75deg);

-o-transform: rotate(75deg);

top: -300px;

left: 200px; }

div#light:before {

position: absolute;

content: "";

width: 90px;

height: 1000px;

top: -1092px;

right: -305px;

background: -webkit-linear-gradient(left, violet, blue, green, yellow, orange, red);

background: -moz-linear-gradient(right, violet, blue, green, yellow, orange, red);

background: -o-linear-gradient(right, violet, blue, green, yellow, orange, red);

background: linear-gradient(to right, violet, blue, green, yellow, orange, red);

-webkit-transform: rotate(-155deg);

-moz-transform: rotate(-155deg);

-ms-transform: rotate(-155deg);

-o-transform: rotate(-155deg);

-webkit-clip-path: polygon(7px 69px, 0 1000px, 90px 1000px, 90px 0);

-moz-clip-path: polygon(7px 69px, 0 1000px, 90px 1000px, 90px 0);

-ms-clip-path: polygon(7px 69px, 0 1000px, 90px 1000px, 90px 0);

-o-clip-path: polygon(7px 69px, 0 1000px, 90px 1000px, 90px 0);

clip-path: polygon(7px 69px, 0 1000px, 90px 1000px, 90px 0);

clip-path: url("#gradientClip"); }

div#light:after {

position: absolute;

content: "";

width: 220px;

height: 100px;

top: -150px;

right: -154px;

background: -webkit-linear-gradient(left, rgba(255, 255, 255, .9), rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));

background: -moz-linear-gradient(right, rgba(255, 255, 255, .9), rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));

background: -o-linear-gradient(right, rgba(255, 255, 255, .9), rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));

background: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));

-webkit-transform: rotate(-75deg);

-moz-transform: rotate(-75deg);

-ms-transform: rotate(-75deg);

-o-transform: rotate(-75deg);

-webkit-clip-path: polygon(0 34px, 0 26px, 155px 0, 215px 97px);

-moz-clip-path: polygon(0 34px, 0 26px, 155px 0, 215px 97px);

-ms-clip-path: polygon(0 34px, 0 26px, 155px 0, 215px 97px);

-o-clip-path: polygon(0 34px, 0 26px, 155px 0, 215px 97px);

clip-path: polygon(0 34px, 0 26px, 155px 0, 215px 97px);

clip-path: url("#triangleClip"); }