SVG / Phần

Đường phân cách hình SVG: Cạnh và lớp của phần

Tạo tám hình dạng đường phân cách phần SVG với biên độ, tần số, chiều cao, tùy chọn lật, màu tô đảo và tối đa ba lớp. Xem trước phần rồi sao chép SVG, CSS và HTML.

Đường phân cách hình SVG: Cạnh và lớp của phần: Chọn cạnh dạng sóng, đường cong, nghiêng, tam giác, mũi tên, zíc zắc, đám mây hoặc núi; điều chỉnh chiều cao, biên độ và số lần lặp; lật hoặc đảo hình; rồi xếp chồng tối đa ba lớp. Đường phân cách co giãn theo mọi chiều rộng trang. Bạn có thể sao chép SVG, CSS định vị hoặc một phần HTML dựng sẵn. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ lập trình viên
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
Đường phân cách hình dạng SVGXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

Xem trước phần

Một chút thay đổi khung cảnh.

Mép có hình dạng giữa hai phần.

Đường phân cách phần
Mã SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
Định vị CSS
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
Phần HTML
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Sử dụng màu nền của phần tiếp theo để tạo mép liền mạch. Lật theo chiều dọc khi chuyển đường phân cách dưới lên trên.

Đường dẫn khép kín và tọa độ

SVG 2 định nghĩa các lệnh closepath và đường cong lập phương: https://www.w3.org/TR/SVG2/paths.html . viewBox ánh xạ các tọa độ này vào khung nhìn: https://www.w3.org/TR/SVG2/coords.html

Nguồn gốc của các hình dạng

Hình dạng sóng sử dụng các đường cong mượt giống như SVG Wave Generator và SVG Blob Generator; các biên dạng khác được vẽ từ những công thức đơn giản. Không có tác phẩm nghệ thuật của bên thứ ba nào được đưa vào, vì vậy bạn có thể sử dụng kết quả theo ý mình.

Cách sử dụng

  1. Chọn một hình dạng rồi điều chỉnh biên độ, tần số và chiều cao.
  2. Thiết lập số lớp, độ mờ và màu sắc, sau đó chọn cạnh phần cùng các tùy chọn lật nếu cần.
  3. Sao chép SVG, CSS định vị và HTML của phần, hoặc tải xuống SVG.

Quyền riêng tư và giới hạn

Việc tạo hình và tải xuống đều chạy hoàn toàn trong trình duyệt của bạn.

Công cụ liên quan

Sóng SVGblob SVGMẫu CSS

Câu hỏi thường gặp

Làm thế nào để cạnh này hòa vào một phần khác?

Dùng màu nền của phần đó làm màu tô cho đường phân cách. CSS dành sẵn không gian cho đường phân cách và định vị tuyệt đối đường phân cách ở cạnh đã chọn.

Công cụ này khác gì so với công cụ tạo sóng?

Công cụ này bổ sung bảy hình dạng khác, tính năng đảo hình và HTML của phần. Trình tạo sóng SVG hiện có cung cấp các sóng ngẫu nhiên và thêm các tùy chọn điều khiển dành riêng cho sóng. Trình tạo hình Blob SVG tạo các hình hữu cơ độc lập.

Tùy chọn đảo hình có tác dụng gì?

Đảo hình sẽ khép đường dẫn về phía trên thay vì phía dưới, đồng thời giữ nguyên vị trí cạnh phân cách. Lật dọc sẽ phản chiếu toàn bộ hình dạng.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản