CSS: Clip Or Crop Images In HTML5 CSS

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

https://kodingen.com/#
https://github.com/kezakez/html5-sticky-note
https://github.com/sarfraznawaz2005/HTML5Sticky

https://gitee.com/hrcl/summerboot
https://github.com/TripleView/SummerBoot net core版本的spring boot,将SpringBoot的先进理念与C#的简洁优雅合二为一，致力于让net core开发变得更简单。
https://github.com/ytbryan/summerboot

Javascript Interpreter for .NET
https://github.com/sebastienros/jint
https://github.com/ImagineLearning/Jint
https://github.com/jint-method
https://github.com/fredericaltorres/Jint.Ex

posted @ 2022-11-04 00:38 ®Geovin Du Dream Park™ 阅读(26) 评论(0) 编辑收藏举报

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

CSS: Clip Or Crop Images In HTML5 CSS

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论