纯css实现火龙果布局效果-html代码-BFW代码库

纯css实现火龙果布局效果

代码语言：html

代码描述：纯css实现火龙果布局效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #edacfa;
}

.container {
  height: 600px;
  width: 750px;
  background-color: #edacfa;
  position: relative;
  margin: auto;
}

.mainbody {
background-color: background: rgb(177,87,183);
background: linear-gradient(0deg, rgba(177,87,183,1) 0%, rgba(213,53,207,1) 52%, rgba(212,131,221,1) 100%);
  height: 290px;
  width: 300px;
  top: 180px;
  left: 195px;
  position: absolute;
  clip-path: polygon(51% 0%, 37% 5%, 28% 14%, 24% 23%, 21% 31%, 19% 40%, 18% 48%, 19% 54%, 21% 58%, 25% 65%, 29% 71%, 34% 75%, 38% 77%, 44% 78%, 49% 79%, 55% 79%, 60% 78%, 65% 75%, 70% 71%, 70% 71%, 74% 67%, 77% 62%, 79% 56%, 81% 49%, 81% 43%, 80% 38%, 80% 30%, 79% 26%, 77% 19%, 72% 13%, 68% 8%, 62% 4%);
  z-index: 0;
}

.tri1 {
  height: 200px;
  width: 250px;
  top: 190px;
  left: 198px;
  background-color: background: rgb(156,52,163);
background: linear-gradient(0deg, rgba(156,52,163,1) 0%, rgba(171,68,177,1) 49%, rgba(248,138,255,1) 100%);
  position: absolute;
  z-index: 4;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri2 {
  height: 200px;
  width: 250px;
  top: 170px;
  left: 267px;
  transform: rotate(350deg);
  background-color: background: rgb(156,52,163);
background: linear-gradient(0deg, rgba(156,52,163,1) 0%, rgba(171,68,177,1) 49%, rgba(248,138,255,1) 100%);
  position: absolute;
  z-index: 4;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri3 {
  height: 314px;
  width: 236px;
  top: 225px;
  left: 276px;
  transform: rotate(15deg);
  background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(201,55,203,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
  position: absolute;
  z-index: 5;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri4 {
  height: 245px;
  width: 276px;
  top: 257px;
  left: 220px;
  transform: rotate(0deg);
  background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(185,24,187,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
  position: absolute;
  z-index: 5;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri5 {
  height: 314px;
  width: 256px;
  top: 245px;
  left: 179px;
  transform: rotate(345deg);
  background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(201,55,203,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
  position: absolute;
  z-index: 5;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri6 {
  height: 190px;
  width: 270px;
  top: 336px;
  left: 245px;
  transform: rotate(7deg);
  background-color: background: rgb(201,55,203);
background: linear-gradient(0deg, rgba(201,55,203,1) 2%, rgba(185,24,187,1) 51%, rgba(216,74,220,1) 83%, rgba(245,122,250,1) 100%);
  position: absolute;
  z-index: 5;
  clip-path: polygon(49% 0%, 43% 6%, 39% 14%, 36% 21%, 49% 23%, 59% 22%, 57% 15%, 53% 7%);
}

.tri7 {
  height: 190px;
  width: 256px;
  top: 335px;
  left: 213px;
  transform: rotate(340deg);
  background-color: background: rgb(138,43,140);
background: linear-gr.........完整代码请登录后点击上方下载按钮下载查看