html+css实现分层金字塔的实例

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-07-14 07:58:06

　　html+css实现分层金字塔的实例

Sure, here is an example of how to create a layered pyramid using HTML and CSS:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layered Pyramid</title>
  <style>
    /* Basic styles */
    body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    /* Pyramid container */
    .pyramid-container {
      position: relative;
      width: 300px;
      height: 300px;
    }

    /* Pyramid layers */
    .pyramid-layer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      background-color: #333;
    }

    .pyramid-layer::before,
    .pyramid-layer::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      background-color: #555;
    }

    .pyramid-layer:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: #777;
    }

    .pyramid-layer:nth-child(1)::before,
    .pyramid-layer:nth-child(1)::after {
      width: 60px;
      height: 60px;
      background-color: #999;
    }

    .pyramid-layer:nth-child(2) {
      top: 20px;
      left: 20px;
    }

    .pyramid-layer:nth-child(3) {
      top: 40px;
      left: 40px;
    }

    .pyramid-layer:nth-child(4) {
      top: 60px;
      left: 60px;
    }

    .pyramid-layer:nth-child(5) {
      top: 80px;
      left: 80px;
    }
  </style>
</head>
<body>
  <div class="pyramid-container">
    <div class="pyramid-layer"></div>
    <div class="pyramid-layer"></div>
    <div class="pyramid-layer"></div>
    <div class="pyramid-layer"></div>
    <div class="pyramid-layer"></div>
  </div>
</body>
</html>

Explanation:

HTML Structure:
- The HTML creates a div container with the class pyramid-container to hold the pyramid layers.
- Inside the container, five div elements with the class pyramid-layer are created to represent the different layers of the pyramid.
CSS Styles:
- Basic styles are set for the body to center the pyramid.
- The .pyramid-container is positioned relative to allow absolute positioning of the layers.
- Each .pyramid-layer is styled with width, height, background color, and positioned absolutely using top, left, and transform: translate().
- The ::before and ::after pseudo-elements create inner shadows for each layer, giving the illusion of depth.
- Each layer has slightly smaller dimensions and a darker background color to create the layered effect.

Key CSS Properties:

position: relative/absolute: Used to position the container and pyramid layers.
width, height, background-color: Style the appearance of each pyramid layer.
::before, ::after: Create pseudo-elements for inner shadows.
top, left, transform: translate(): Position each layer accurately