纯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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0