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

本文中效果的实现需要依赖CSS3的gradient属性。

平角切角

html代码：

<div class="clip"></div>

css代码：

.clip {width: 300px;height: 200px;background: linear-gradient(135deg, transparent 15px, lightblue 0) top left,linear-gradient(-135deg, transparent 15px, lightblue 0) top right,linear-gradient(-45deg, transparent 15px, lightblue 0) bottom right,linear-gradient(45deg, transparent 15px, lightblue 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;
}

弧形切角

html同上，css代码如下：

.clip{width: 300px;height: 200px;background: radial-gradient(circle at bottom right,transparent 15px,lightblue 0) bottom right,radial-gradient(circle at bottom left,transparent 15px,lightblue 0) bottom left,radial-gradient(circle at top left,transparent 15px,lightblue 0) top left,radial-gradient(circle at top right,transparent 15px,lightblue 0) top right;background-size: 50% 50%;background-repeat: no-repeat;}

切平角

.clip {width: 300px;height: 200px;background: linear-gradient(135deg, lightblue 15px, transparent 0) top left,linear-gradient(-135deg, lightblue 15px, transparent 0) top right,linear-gradient(-45deg, lightblue 15px, transparent 0) bottom right,linear-gradient(45deg, lightblue 15px, transparent 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

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

css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式. 切单一角: background: #58 ...
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实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等新出的HTML5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...

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

平角切角

弧形切角

切平角

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

最新文章

热门文章