CSS: Clip Or Crop Images In HTML5 CSS


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 CSStitle>
    <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>

相关阅读:
【Adobe Illustrator 教程】4. 认识渐变工具
工作学习记录
使用transformers进行端到端的目标检测
3. MyBatis与spring结合原理
Buffer Pool详解
浪潮信息面向全行业公布设计指南，以开放规范促进生成式AI多元算力发展
windows文件和目录相关命令
使用国内源加速pip安装包
大厂面试题-Java并发编程基础篇（五）
论文阅读：Practical Deep Raw Image Denoising on Mobile Devices

原文地址：https://blog.csdn.net/geovindu/article/details/127697988