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, tra.........完整代码请登录后点击上方下载按钮下载查看

网友评论0