css实现平角切角和弧形切角效果

在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。
切单一角：

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

采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效果。
切两个角：

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

上述样式中，笔者用了两种颜色以方便读者理解其中的含义。
两个切角实现了，四个切角就很容易了。
四个切角实现：

background: #58a;
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) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

上述样式实现了四个平角切角的样式，那么我们进一步构思，想要实现弧形切角该怎么做呢？
弧形切角：

可以看到，图案类似传统的剃须刀片，实现这种样式并不难，我们用径向渐变来替代线性渐变就可以。

background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

想要实现切角的效果，还有不少其他的方案，比如内联svg和border-image方案，裁切路径方案等，感兴趣的读者可以自己探索尝试。

css实现平角切角和弧形切角效果相关推荐

css实现平角切角和弧形切角
本文中效果的实现需要依赖CSS3的gradient属性. 平角切角 html代码: <div class="clip"></div> css代码: .cli ...
ios 控件切圆_iOS中切圆角,任意几个角(带边框,不带边框)__OC和Swift版本韩俊强的博客...
需求: 1.日常我们在切控件圆角时会遇到想切任意圆角? 2.切过圆角带边框和不带边框的选择? 那么今天我们就用Objective-C和Swift都给它实现了: OC代码: UILabel *myLab ...
切图具体需要切什么内容_UI日常-切图切图怎么破？
作为一名"小小"的UI设计师,切图可以说是我们日常工作的必修课.一些设计师认为切图规范不重要:或是切图是设计助理的活:又或者是单方面认为,开发应该100%的按照我们的切图去写代码. ...
android ui 切图工具,APP切图标注教程：UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...
PS-前端切图教程（切jpg图和切png图）
ps:多日后的补充说明部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 在我看来,现在人们 ...
h5页面如何切图_PS-前端切图教程（切jpg图和切png图）
ps:多日后的补充说明部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 在我看来,现在人们 ...
Aop中动态横切与静态横切
什么是动态横切,静态横切?动态和静态的区别在哪? 首先,横切是面向方面编程的专用名词:大概是指在对象中插入新的职责:就好像一面包,我们把它从中间切开,放入点肉类,就成了汉堡,吃起来味道就不一样了: 横 ...
怎么把照片的四个角修成弧形
因为工作的需要,我们常需将照片的四个角修成弧形,在原来这个操作是需要用ps来完成的.但是因为不会ps的伙伴居多,所以很多软件就开发了把照片的四个角修成弧形的这个功能,也就是说大家可以找一款具备将照片的 ...
切双眼皮和开内眼角一起做效果最好吗？
切双眼皮和开内眼角一起做效果最好吗? 我想去医院做全切双眼皮,可是医生建议我再开个内眼角,这医生是不是为了赚钱坑我啊?"我想说的是,你这就有点错怪医生了-其实这才是医生最真诚的建议~ 为什么 ...

css实现平角切角和弧形切角效果

css实现平角切角和弧形切角效果相关推荐

最新文章

热门文章