《CSS揭秘》：菱形图片

GraphQuery 发布于2019-08-29 11:19 / 694人阅读

摘要：菱形图片在网页设计中，把图片裁切成菱形主要有两种方法。图片需要扩大倍去填满整个菱形区域裁切路径在线编辑使用元素嵌套方案虽然可以实现目的，但是兼容性并不好，如果图片不是正方形，结果就会严重变形。

菱形图片

在网页设计中，把图片裁切成菱形主要有两种方法。一种是基于元素嵌套方案，另外一种是裁切路径方案

元素嵌套方案在线编辑

将图片用一个

包裹起来，对这个

变形，然后对图片应用相反的变形。

.picture{
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img{
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);//图片需要扩大1.42倍去填满整个菱形区域
}

裁切路径在线编辑

使用元素嵌套方案虽然可以实现目的，但是兼容性并不好，如果图片不是正方形，结果就会严重变形。另一种方法是使用裁切路径属性clip-path。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

云服务器 GPU云服务器图片css css图片自适应分页图片界面css数据 webuploader图片css数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111567.html

css揭秘笔记——形状

摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景单独设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。自适应的椭圆（border-radius的用法）单独指定水平和垂直半径长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 评论0 收藏0
《css揭秘》读书笔记

摘要：但是根据本司机两年的开发经验来看，在实际开发中很少来使用这个单位。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。第一章引言 css编码技巧在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...

xiguadada 2019-08-29 16:28 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
[CSS]《CSS揭秘》第三章——形状

摘要：自适应椭圆斜杠前为水平半径，后为垂直半径。和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。所以不要用或展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。和必须配合属性来使用，用来定义插入的内容，必须有值，至少是空。自适应椭圆 border-radius:50% / 50%;//斜杠前为水平半径，后为垂直半径。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 评论0 收藏0
前端每日实战：45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbYsU?w=500&h=500); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comeh...

MarvinZhang 2019-08-29 15:38 评论0 收藏0