div+css布局实现城堡建筑效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css布局实现城堡建筑效果代码

代码标签: div css 布局 城堡 建筑

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


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

#building {
  width: 200px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
        from 135deg at 50% 50%,
        #423b4d 0 90deg,
        transparent 0 100%
      )
      118px 146px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 118px 164px / 18px 20px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      91px 146px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 91px 164px / 18px 20px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      64px 146px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 64px 164px / 18px 20px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      164px 212px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 164px 230px / 18px 26px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      18px 212px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 18px 230px / 18px 26px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      118px 306px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 118px bottom / 18px 26px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      91px 306px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 91px bottom / 18px 26px,
    conic-gradient(from 135deg at 50% 50%, #423b4d 0 90deg, transparent 0 100%)
      64px 306px / 18px 18px,
    linear-gradient(#423b4d, #423b4d) 64px bottom / 18px 26px,
    linear-gradient(#a74c46, #a74c46) 40px 138px / 120px 8px,
    radial-gradient(#423b4d 9px, transparent 10px) 90px 233px / 20px 20px,
    linear-gradient(#423b4d, #423b4d) 163px bottom / 20px 40px,
    linear-gradient(#423b4d, #423b4d) 17px bottom / 20px 40px,
    linear-gradient(#c3bec4, #c3bec4) 154px 284px / 38px 6px,
    linear-gradient(#c3bec4, #c3bec4) 8px 284px / 38px 6px,
    conic-gradient(from 160deg at 50% 0%, #d76d55 0 40deg, transparent 0 100%)
      150px 130px / 46px 60px,
    conic-gradient(from 160deg at 50% 0%, #d76d55 0 40deg, transparent 0 100%)
      4px 130px / 46px 60px,
    linear-gradient(#a74c46, #a74c46) 146px 190px / 54px 8px,
    linear-gradient(#a74c46, #a74c46) 0 190p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0