CSS构建光学棱镜分解现象

白光经过三棱镜将被分解为七彩光

css, 物理

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 1224
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background-color: #111;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  width: 100%;
  top: calc(50% - 200px);
}
.wrapper .pyramid {
  position: absolute;
  left: calc(50% - 110px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 220px 120px;
  border-color: transparent transparent #fff   transparent;
}
.wrapper .pyramid::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 11px;
  left: calc(50% - 112px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 112px 204px 112px;
  border-color: transparent transparent #171717;
}
.wrapper .light-beam {
  width: 1500px;
  height: 10px;
  position: absolute;
  top: 250px;
  right: 50%;
  transform: rotate(-12deg);
  background-color: #fff;
}
.wrapper .rainbow {
  position: absolute;
  left: 50%;
  top: 135px;
  transform: rotate(12deg);
  perspective: 100px;
  perspective-origin: left;
}
.wrapper .rainbow div {
  width: 800px;
  height: 13px;
  transform: rotate3d(0, 1, 0, -10deg);
  margin-top: -1px;
}

.wrapper .rainbow div.c1 {
  background-color: #bc1300;
  
}
.wrapper .rainbow div.c2 {
  background-color: #cd4314;
}
.wrapper .rainbow div.c3 {
  background-color: #ecc20e;
}
.wrapper .rainbow div.c4 {
  background-color: #8c9f08;
}
.wrapper .rainbow div.c5 {
  background-color: #66a8c2;
}
.wrapper .rainbow div.c6 {
  background-color: #773676;
}

HTML

白光经过三棱镜将被分解为七彩光

css, 物理

编辑器支持Emmet

快捷键

白光经过三棱镜将被分解为七彩光

css, 物理

CSS3构建的山岭瀑布、气泡和阳光白云景象

CSS3 10个DIV构建的超酷光影变幻艺术

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：