《CSS揭秘》：切角效果

JerryZou 发布于2019-08-29 11:18 / 2336人阅读

摘要：切角效果切角效果是一种常见的视觉风格设计。但是现在在里，依然无法简单的生成切角效果。原文位于揭秘切角效果。裁切路径方案使用裁切路径可以在裁切任意多边形，下面的代码可以切除和上文一样的效果。改变切角深度时需要同时改变个地方。

切角效果

切角效果是一种常见的视觉风格设计。但是现在在CSS里，依然无法简单的生成切角效果。

css渐变

使用CSS渐变[linear-parent][1]可以形成切角风格

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);

如果想要四个角都切，则可以

background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
            linear-gradient(-135deg, transparent 15px, #58a 0) top right,
            linear-gradient(-45deg, transparent 15px, #58a 0) bottomright,
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

内联SVG与border-image方案

SVG方案不熟悉，暂时不讨论。原文位于《CSS》揭秘12:切角效果。

裁切路径方案

使用裁切路径可以在裁切任意多边形，下面的代码可以切除和上文一样的效果。其实就是指定了八个顶点。

clip-path:
    polygon(
        15px 0, calc(100% - 15px) 0, 100% 15px, 
        100% calc(100% -  15px), calc(100% - 15px) 100%,
        15px 100%, 0 calc(100% - 15px), 0 15px
    );

使用本方案虽然简短，但是维护缺并不方便。改变切角深度时需要同时改变8个地方。使用css与处理器的mixin会方便很多。

云服务器 GPU云服务器 css效果效果显示 css jquery 气球css js效果 js和css效果图

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

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

css揭秘笔记——形状

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

dantezhao 2019-08-29 13:47 评论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编码技巧在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性...

xiguadada 2019-08-29 16:28 评论0 收藏0
《css 揭秘》读书笔记

摘要：因为鲜为人知的第四个长度参数双层投影毛玻璃效果见毛玻璃自定义复选框不多介绍，也有相关案例复选框滚动提示现在越来越多的移动端都是这样处理，滚动提示其他揭秘对应的地址图灵图书在封底都提供优惠码低价购买电子书她目标如何用 css 解决难题收获尽量减少代码重复 1 用相对值 font-size: 20px; line-height: 30px; // 应该改成 font-size:...

OnlyMyRailgun 2019-08-29 13:20 评论0 收藏0
[CSS]《CSS揭秘》第三章——形状

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

ysl_unh 2019-08-30 15:53 评论0 收藏0