CSS: Clip Or Crop Images In HTML5 CSS
CSS: Clip Or Crop Images In HTML5 CSS
geovindu
发布于 2026-06-18 21:12:46
发布于 2026-06-18 21:12:46
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="Geovin Du 涂聚文">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clip Or Crop Images In HTML CSS</title>
<meta name="Description" content="geovindu">
<meta name="Keywords" content="geovindu">
<meta name="author" content="geovindu">
<style>
/* (A) CLIP CIRCLE from https://code-boxx.com/clip-crop-images-html-css/*/
.cropC { clip-path: circle(30%); }
/* (B) CLIP TRIANGLE */
.cropD { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
/* (C) CLIP DIAMOND */
.cropE { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
/* (D) CLIP STAR */
.cropF { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
</style>
</head>
<body>
<img src="images/geovindu.png" class="cropC"/>
<img src="images/geovindu.png" class="cropD"/>
<img src="images/geovindu.png" class="cropE"/>
<img src="images/geovindu.png" class="cropF"/>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2026-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号