CSS 实现切角效果
最近项目中看到这样的一个切角效果,如下所示
就是一个正常的矩形,然后被“切”了一块,而且是沿着右上角切的。那么,这种布局如何实现呢?
一、自适应方式
这种布局一般有两种自适应方式,当然具体需要哪种可以根据实际设计师需求
1. 固定距离
无论宽高怎么变化,切角距离顶部的距离是固定的,如下
2. 固定角度
无论宽高怎么变化,切角与顶部的夹角是固定的,如下
下面具体来看这两种布局的实现
二、固定距离的切角
固定距离的比较好实现,只需要借助 clip-path就可以了。假设距离顶部的距离是20px
,那么四个点的坐标是
代码实现就是
div{clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}
这样就得到了一个固定距离的切角
三、固定角度的切角
这个稍微复杂一点。起初,我以为简单的线性渐变就能实现,比如
div{background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}
实时效果如下
可以看到,角度虽然是固定的,但是切角不会紧贴右上角,原因是线性渐变的起始点是沿着角度与之垂直的最远距离,如下所示(截图取自 MDN 官网)
所以并不能保证切角的固定相交位置,比较适合那种小切角场景。
那还有其他方式吗?当然也是有的
提到角度,除了线性渐变,还能想到锥形渐变conic-gradient,可以以某一点绘制锥形图案。假设固定角度是20度
,示意如下
那么,锥形渐变的角度就是 250°(270 - 20),代码实现如下
div{background: conic-gradient(#B89DFF 250deg, transparent 0);
}
效果如下
因为锥形渐变默认中心点是容器的中点,我们需要移到右上角,可以通过at
来指定位置,如下
div{background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
}
这样就得到了一个固定角度的切角
四、总结一下
以上就是这类布局的两种实现方案,主要用到了clip-path
和conic-gradient
,下面总结一下
- clip-path 可以根据坐标点裁剪矩形
- linear-gradient 也能实现切角效果,但并不能紧贴右上角
- conic-gradient 可以实现实现任意角度的锥形,同时能指定中心点位置
当然不仅仅局限于此,很多不规则布局都可以朝这个方向思考
CSS 实现切角效果相关推荐
- html中切角文本框,css实现切角效果
1. 一个切角 思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
- css3切角文本框_[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切 ...
- css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式. 切单一角: background: #58 ...
- html中切角文本框,HTML/CSS实现切角矩形效果
非纯色背景下切角矩形的效果图如下: HTML: CSS: .top-box { position: relative; display: block; width: 90%; min-height: ...
- html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框 前言 这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
- css梯形+切角阴影效果
css梯形+切角阴影效果 .addIcon {width: 50px;height: 124px;background: #FFFFFF;//切角background: linear-gradient ...
- CSS背景切角的实现研究
问题 我们在写前端页面过程总,会碰到这种情况,UCD给的一个带切角的背景给我们当一个模块的背景,然后这个模块的宽高又都不是固定的,这种情况下,如果改变模块的大小,切角的角度就会发生变化,如下图所示(原 ...
- linear-gradient 实现切角效果
一.前言 linear-gradient() :函数用于创建一个表示两种或多种颜色线性渐变的图片.即实现线性渐变! 二.基础用法 默认渐变方向是从上到下渐变,这种情况不需要申明渐变方向! /* 1. ...
- css3切角文本框_CSS3样式linear-gradient的使用(切角效果)
缺角效果 先看效果图 这是内容 .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-gradient(-1 ...
最新文章
- 利用FFmpeg切割视频
- [vue] 说说你对SPA单页面的理解,它的优缺点分别是什么?
- 不同网段通过静态路由实现互通,华为S5700交换机开启telnet远程指定IP登陆配置(强烈推荐)
- 9:23 2009-7-23
- oracle游标fetch_SQL游标@@ FETCH_STATUS函数概述
- ansible之安装与简单使用
- socket.io html5 聊天,socket.io实现在线聊天页面
- bzoj 3824: [Usaco2014 Dec]Guard Mark【状压dp】
- 字符集及其存储方式(解决乱码问题)
- android 单位选择器,Android-PickerView
- 使用Visio画各种可视化的流程图之活动图和状态图
- linux源码编译ipk,OpenWrt-SDK-编译生成ipk软件包
- Java设计模式学习总结
- html手机分辨率选择,怎么看手机分辨率(手机屏幕分辨率多少才合适?)
- MATLAB-SIMULINK-二极管搭建整流电路(1)
- python 用泽勒算法计算该天是星期几
- snapchat_如何在Snapchat快照中添加背景
- 饥荒专用服务器全图显示代码,饥荒联机地图全开代码
- BIBTeX制作参考文献 [转]
- 高斯原型网络原论文高质量翻译
热门文章
- Win10系统 Office2010程序打开PPT文档报错“此应用无法在你的电脑上运行
- 在职研究生计算机专业好考么,湖南在职研究生计算机专业好考不
- .net 本地文件管理 代码_如何在百万行代码中发现隐藏的后门
- PDF.js 实现pdf分页加载的前端优化(实现按需加载)-前端的demo也已经上传
- Python爬虫爬取Twitter视频、文章、图片
- 一些杂乱的C语言算法
- java保留字详解_下列( )不是Java中的保留字?
- 【郭东白架构课 模块二:创造价值】17|通用技能(下):架构师如何保障交付与沉淀知识?
- Ubuntu+Sendmail+Dovecot+Openwebmail 邮件服务器搭建完全解决方案
- Python 快速打开网页