Thuộc tính clip-path

Thuộc tính clip-path xác định vùng hiển thị của một phần tử bằng cách cắt xén nó theo hình dạng được chỉ định. Nó nhận một hàm cắt xén hoặc đường dẫn SVG làm tham số.

Cú pháp

bộ chọn {
	clip-path: hàm cắt xén;
}

Giá trị

Giá trị	Mô tả
`circle`	Cắt xén phần tử theo hình tròn. Các tham số: bán kính và vị trí tâm.
`ellipse`	Cắt xén phần tử theo hình elip. Các tham số: bán kính theo X/Y và vị trí tâm.
`polygon`	Cắt xén phần tử theo đa giác. Các tham số: tọa độ các điểm, phân cách bằng dấu phẩy.
`url`	Sử dụng đường dẫn SVG để cắt xén. Tham số: ID của đường dẫn trong SVG.
`path`	Cắt xén phần tử theo đường dẫn SVG sử dụng chuỗi dữ liệu đường dẫn. Tham số: chuỗi đường dẫn SVG.
`inset`	Cắt xén phần tử bằng hình chữ nhật với khả năng bo góc. Các tham số: khoảng cách từ trên, phải, dưới, trái và bán kính bo góc.
`margin-box`	Sử dụng khoảng cách ngoài (margin) của phần tử làm vùng cắt xén.
`border-box`	Sử dụng đường viền (border) của phần tử làm vùng cắt xén.
`padding-box`	Sử dụng khoảng cách trong (padding) của phần tử làm vùng cắt xén.
`content-box`	Sử dụng nội dung (content) của phần tử làm vùng cắt xén.
`none`	Tắt cắt xén (giá trị mặc định).

Ví dụ

Cắt xén phần tử theo hình lục giác:

<div id="hexagon"></div>

#hexagon {
	width: 200px;
	height: 200px;
	background: #3498db;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

Ví dụ

Cắt xén phần tử theo hình tròn:

<div id="circle"></div>

#circle {
	width: 200px;
	height: 200px;
	background: #2ecc71;
	clip-path: circle(40% at 50% 50%);
}

Ví dụ

Cắt xén phần tử theo hình elip:

<div id="ellipse"></div>

#ellipse {
	width: 200px;
	height: 150px;
	background: #9b59b6;
	clip-path: ellipse(25% 40% at 50% 50%);
}

Ví dụ

Cắt xén phần tử với góc bo tròn:

<div id="inset"></div>

#inset {
	width: 200px;
	height: 200px;
	background: #e67e22;
	clip-path: inset(20% 15% 10% 5% round 10px);
}

Ví dụ

Cắt xén phần tử theo đường dẫn:

<div id="path"></div>

#path {
	width: 200px;
	height: 200px;
	background: #3498db;
	clip-path: path('M20,20 L180,20 L160,180 L40,180 Z');
}

Ví dụ

Sử dụng đường dẫn SVG để cắt xén phức tạp:

<svg width="0" height="0">
	<clipPath id="star-path">
		<path d="M50 0 L61 35 L98 35 L68 57 L79 92 L50 70 L21 92 L32 57 L2 35 L39 35 Z"/>
	</clipPath>
</svg>
<div id="star"></div>

#star {
	width: 100px;
	height: 100px;
	background: #e74c3c;
	clip-path: url(#star-path);
}

Ví dụ . Hình tam giác

Cắt xén theo hình tam giác:

<div id="triangle"></div>

#triangle {
	width: 200px;
	height: 200px;
	background: #e74c3c;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Ví dụ . Hình dạng kết hợp

Tạo hình dạng phức tạp:

<div id="combined"></div>

#combined {
	width: 250px;
	height: 250px;
	background: #2ecc71;
	clip-path: polygon(
		0% 0%, 100% 0%, 100% 75%,
		75% 75%, 75% 100%, 50% 75%,
		0% 75%
	);
}

Ví dụ . Văn bản được cắt xén

Cắt xén khối văn bản:

<div id="text-clip">
	<p>CSS clip-path tạo ra hiệu ứng tuyệt vời!</p>
</div>

#text-clip {
	width: 300px;
	padding: 20px;
	background: #3498db;
	color: white;
	font-size: 24px;
	clip-path: ellipse(120px 80px at 50% 50%);
}

Ví dụ . Cắt xén ảnh hình tròn

Cắt xén hình ảnh theo hình tròn:

<div class="image-clip-circle">
	<img src="img.png">
</div>

.image-clip-circle img {
	width: 200px;
	height: 200px;
	clip-path: circle(50% at center);
	object-fit: cover;
}

Ví dụ . Cắt xén ảnh hình ngôi sao

Cắt xén hình ảnh theo hình ngôi sao năm cánh:

<div class="image-clip-star">
	<img src="img.png">
</div>

.image-clip-star img {
	width: 200px;
	height: 200px;
	clip-path: polygon(
		50% 0%,
		61% 35%,
		98% 35%,
		68% 57%,
		79% 91%,
		50% 70%,
		21% 91%,
		32% 57%,
		2% 35%,
		39% 35%
	);
	object-fit: cover;
}

Ví dụ . Cắt xén ảnh hình lục giác

Cắt xén hình ảnh theo hình lục giác:

<div class="image-clip-hexagon">
	<img src="img.png">
</div>

.image-clip-hexagon img {
	width: 200px;
	height: 200px;
	clip-path: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
	);
	object-fit: cover;
}

Ví dụ . Cắt xén hình trái tim

Cắt xén hình ảnh theo hình trái tim:

<div class="image-clip-heart">
	<img src="img.png">
</div>

.image-clip-heart img {
	width: 200px;
	height: 180px;
	clip-path: polygon(
		50% 15%,
		35% 5%,
		15% 15%,
		10% 35%,
		25% 60%,
		50% 80%,
		75% 60%,
		90% 35%,
		85% 15%,
		65% 5%
	);
	object-fit: cover;
}

Ví dụ . Cắt xén ảnh khi di chuột

Thay đổi hình dạng cắt xén khi di chuột qua:

<div class="image-clip">
	<img src="img.png">
</div>

.image-clip {
	display: inline-block;
}
.image-clip img {
	width: 200px;
	height: 200px;
	clip-path: circle(40% at 50% 50%);
	object-fit: cover;
	transition: clip-path 0.5s ease;
}
.image-clip:hover img {
	clip-path: polygon(
		50% 0%,
		90% 20%,
		100% 60%,
		75% 100%,
		25% 100%,
		0% 60%,
		10% 20%
	);
}

Xem thêm

thuộc tính clip,
cho phép cắt xén hình chữ nhật
thuộc tính mask,
cho phép tạo mặt nạ phức tạp cho phần tử
thuộc tính shape-outside,
xác định hình dạng để văn bản bao quanh
thuộc tính filter,
áp dụng hiệu ứng đồ họa cho phần tử