实现波浪形或云朵形状的装饰效果
为了实现波浪形或云朵形状的装饰效果，我们可以利用 CSS 的 clip-path 属性或者 SVG 图像。使用 SVG 可以更灵活地控制复杂形状，并且在不同屏幕尺寸下保持一致的表现。下面是基于你之前的需求调整后的示例，其中半圆装饰被替换为波浪形和云朵形状。
<!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 Wave & Cloud 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-wave,
.deco-cloud {
position: absolute;
width: 100%;
height: auto;
left: 0;
z-index: -1;
}
/* Hero 区块：波浪（白色半透明） */
.hero-section .deco-wave {
bottom: -20px;
fill: rgba(255, 255, 255, 0.15);
}
/* Features 区块：云朵（浅紫半透明） */
.features-section .deco-cloud {
top: -80px;
fill: rgba(126, 77, 225, 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-wave,
.deco-cloud {
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">
<!-- 装饰波浪 -->
<svg class="deco-wave" viewBox="0 0 1440 320">
<path fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,218.7C384,235,480,245,576,229.3C672,213,768,171,864,149.3C960,128,1056,128,1152,149.3C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<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">
<!-- 装饰云朵 -->
<svg class="deco-cloud" viewBox="0 0 1440 320">
<path fill-opacity="1" d="M0,128L48,128C96,128,192,128,288,138.7C384,149,480,171,576,170.7C672,171,768,149,864,133.3C960,117,1056,107,1152,122.7C1248,139,1344,181,1392,202.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<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>在这个版本中，我们用 SVG 来绘制波浪和云朵形状，这样可以确保这些图形具有良好的可扩展性和响应性。你可以根据自己的需要调整 SVG 路径来获得不同的波浪和云朵效果
(来自qianwen)