✅ 核心：斜切区块（clip-path）为主结构

✅ 点缀：大半圆（border-radius: 50%）作为背景装饰

✅ 响应式：小屏自动隐藏半圆，保证可读性


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Odoo Style – Slanted Sections with Half-Circle Decor</title>
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      overflow-x: hidden;
      background: white;
    }

    /* ———————— 通用斜切区块 ———————— */
    .slanted-section {
      position: relative;
      padding: 6rem 0;
    }

    /* 下斜切：底部向右上倾斜 */
    .slanted-bottom {
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      margin-bottom: -120px;
    }

    /* 上斜切：顶部向左下倾斜 */
    .slanted-top {
      clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
      margin-top: -120px;
      padding-top: 8rem;
    }

    /* 内容层（防止被裁剪） */
    .slanted-content {
      position: relative;
      z-index: 2;
    }

    /* ———————— 装饰性半圆 ———————— */
    .deco-half-circle {
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      z-index: -1;
    }

    /* Hero 区块：右下角半圆（白色半透明） */
    .hero-section .deco-half-circle {
      bottom: -100px;
      right: -80px;
      background: rgba(255,255,55, 0.15);
    }

    /* Features 区块：左上角半圆（浅紫半透明） */
    .features-section .deco-half-circle {
      top: -80px;
      left: -60px;
      background: rgba(126,177, 25, 0.06);
    }

    /* ———————— 背景色预设 ———————— */
    .bg-gradient-primary {
      background: linear-gradient(135deg, #7e4de1 0%, #4c6ef5 100%);
      color: white;
    }
    .bg-light-slate {
      background: #f8f9ff;
    }

    /* 卡片样式 */
    .odoo-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      padding: 1.5rem;
      height: 100%;
      transition: transform 0.3s ease;
    }
    .odoo-card:hover {
      transform: translateY(-5px);
    }

    /* 按钮 */
    .btn-odoo {
      background: #7e4de1;
      border: none;
      padding: 0.65rem 1.8rem;
      font-weight: 600;
    }
    .btn-odoo:hover {
      background: #6a3ed0;
    }

    /* ———————— 响应式：小屏隐藏装饰 ———————— */
    @media (max-width: 768px) {
      .deco-half-circle {
        display: none;
      }
      .slanted-top,
      .slanted-bottom {
        clip-path: none !important;
        margin: 0 !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
      }
    }
  </style>
</head>
<body>

  <!-- Hero Section: 下斜切 + 右下角半圆 -->
  <section class="slanted-section slanted-bottom bg-gradient-primary hero-section">
    <!-- 装饰半圆 -->
    <div class="deco-half-circle"></div>
    
    <div class="container slanted-content text-center text-white">
      <h1 class="display-4 fw-bold mb-3">All-in-One Business Platform</h1>
      <p class="lead mb-4 opacity-90">Run your entire business with one integrated suite: CRM, eCommerce, accounting, and more.</p>
      <button class="btn btn-light btn-odoo btn-lg">Start Free Trial</button>
    </div>
  </section>

  <!-- Features Section: 上斜切 + 左上角半圆 -->
  <section class="slanted-section slanted-top bg-light-slate features-section">
    <!-- 装饰半圆 -->
    <div class="deco-half-circle"></div>
    
    <div class="container slanted-content">
      <div class="row justify-content-center mb-5">
        <div class="col-lg-8 text-center">
          <h2 class="fw-bold mb-3">Modular Apps That Work Together</h2>
          <p class="text-muted">Every app is designed to integrate seamlessly — no silos, no chaos.</p>
        </div>
      </div>
      <div class="row g-4">
        <div class="col-md-4">
          <div class="odoo-card">
            <h5>Sales & CRM</h5>
            <p class="text-muted">Automate pipelines, track leads, close deals faster.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="odoo-card">
            <h5>eCommerce</h5>
            <p class="text-muted">Launch a beautiful store in minutes.</p>
          </div>
        </div>
        <div class="col-md-4">
          <div class="odoo-card">
            <h5>Accounting</h5>
            <p class="text-muted">Real-time insights, automated invoicing.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Optional CTA or Footer -->
  <footer class="bg-dark text-white py-4 mt-5">
    <div class="container text-center">
      <p>© 2025 Your Company. Inspired by Odoo design.</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

区块 斜切类型 半圆位置 半圆颜色
Hero 底部下斜切 右下角（部分露出） 白色 rgba(255,255,255,0.15)
Features 顶部上斜切 左上角（部分露出） 浅紫色 rgba(126,77,225,0.06)
💡 半圆不是“完整显示”，而是故意超出容器边界，只露出一部分，形成“若隐若现”的装饰感 —— 这正是现代 SaaS 网站常用手法（如 Notion、Linear、Odoo）。

🔧 自定义建议
调整半圆大小：修改 .deco-half-circle { width: Xpx; height: Xpx }
改变位置：调整 top / bottom / left / right
换颜色：修改 background: rgba(...) 的值
加动画：可添加 opacity 或 scale 动画增强进入效果
✅ 最终效果特点
主结构 = Odoo 式斜切（专业、有动感）
次要装饰 = 半圆（柔和、有机、不抢戏）
移动端 = 自动降级为标准区块（内容优先）
如果你觉得半圆太“圆”，也可以换成 椭圆（border-radius: 50% / 30%）或 四分之一圆（用 border-top-left-radius 等）。
（来自qianwen)

标签: none