CSS3实现缺角矩形,折角矩形以及缺角边框


Posted in HTML / CSS onDecember 20, 2019

前言

前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的《CSS揭秘》一书,记得有这个篇章,遂有了此文。

话不多说,放个效果图先

缺角

CSS3实现缺角矩形,折角矩形以及缺角边框 

1. 伪元素实现

<div class="bg cover"></div>
.bg{
  width: 120px;
  height: 80px;
  background: #58a;
} /* 下文元素都使用了此样式 */

.cover{
    position: relative;
}
.cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
}
.cover::after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

用伪元素画一个和背景色相同的三角形,然后绝对定位到需要遮挡的地方,如下图,但是这个最多只能弄两个缺角

CSS3实现缺角矩形,折角矩形以及缺角边框 

2. 渐变实现

CSS语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

描述
direction 用角度值指定渐变的方向(或角度)。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。

并且渐变可以接受一个角度(比如45deg)作为方向,而且色标的位置信息也可以是绝对的长度值。

CSS3实现缺角矩形,折角矩形以及缺角边框

45deg: 表示从左下到右上的方向

-45deg: 表示从右下到左上的方向

......

<div class="bg missAngle"></div>
.missAngle{
    background: linear-gradient(-45deg, transparent 10px, #58a 0);
}

CSS3实现缺角矩形,折角矩形以及缺角边框

实现多个角

<div class="bg rect"></div>
.rect{
  background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
          linear-gradient(-135deg, transparent 10px, #58a 0) top right,
          linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
          linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  /* Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。 */
}

CSS3实现缺角矩形,折角矩形以及缺角边框

这个实际上使用四个图形拼接出来的,如下图

CSS3实现缺角矩形,折角矩形以及缺角边框

background-size: 50% 50%; 表示每个小图形宽50%,高50%

弧形切角

<div class="bg cricle"></div>
.cricle{
  background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left,
          radial-gradient(circle at top right, transparent 10px, #58a 0) top right,
          radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right,
          radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

CSS3实现缺角矩形,折角矩形以及缺角边框 

最后,Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。

这里有一个问题,拉动浏览器,当宽度被挤压,小于定义宽度时,可能会出现白色的缝隙,这里需要注意一下下,如下图

CSS3实现缺角矩形,折角矩形以及缺角边框

当背景图是一张图片的时候,这时实现缺角的话渐变就不好使了,接下来请出clip-path

clip-path实现

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。

clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)

x y, x1 y1, x2 y2, x3 y3, ... 这些表示坐标轴中的点,根据所有的点绘制一个封闭的图形

<div class="bg rect-clip"></div>
.rect-clip{
  background-image: url(./im.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  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)
}

效果图:

CSS3实现缺角矩形,折角矩形以及缺角边框

总宽度为120px
calc(100% - 15px)  =>  105px
100%               =>  120px

CSS3实现缺角矩形,折角矩形以及缺角边框

将对应的点连接起来就构成了一个缺角矩形

clip-path的功能还是蛮强大的,绘制各种各样的形状,菱形,五角星啊等等,比如下图

<div class="bg clip5"></div>
.clip5{
  	margin-left: 30px;
    /*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
    clip-path: inset(0 round 0 25%); /* 可以简写 */
    /* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
    /* inset使用四个值(对应“上 右 下 左”的顺序)来设置圆角半径。 */
}

CSS3实现缺角矩形,折角矩形以及缺角边框 

用来做动画

<div class="line-box">
	<div class="line line1"></div>
	<div class="line line2"></div>
	<div class="line line3"></div>
</div>
.line-box{ 	
	width: 100px;
	height: 60px;
}
.line{
	width: 100%;
	height: 100%;
	background: #26b91a;
}
.line1{
	-webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	animation: a 2s 1s infinite;
}
.line2{
	clip-path: polygon(10% 10%, 60% 40%, 50% 90%);
	animation: b 2s 1s infinite;
}
.line3{
	clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%);
	animation: c 2s 1s infinite;
}
@keyframes a{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 40%, 25% 100%, 75% 100%);
	}
}
@keyframes b{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	}
}
@keyframes c{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
	}
}

CSS3实现缺角矩形,折角矩形以及缺角边框

这里只列举了clip-path的部分功能,更多形状点这里 ,一个用来生成各种形状(包括随意拖拉自定义)并且可以直接生成代码的网站。

虽然这个能绘制各式形状,但是兼容性却不怎么好,谷歌版本79,火狐71测试正常,IE不可,具体兼容性请看 这里

如果项目需要考虑兼容性问题,也可以放一张图片当作背景图,图片压缩一下,或者只有最多两个缺角使用伪元素,根据项目实际情况选择合适自己的方案

缺角边框
 

<div class="out-rect">
<div class="in-rect"></div>
</div>
.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}

效果如下:

CSS3实现缺角矩形,折角矩形以及缺角边框

两个缺角矩形叠加的效果,内部矩形宽高跟随父div大小,只要保持垂直居中就好,padding的值为最终呈现的边框的宽度

折角

还是使用渐变linear-gradient实现,在缺角矩形的基础上多了一个折角

效果图如下:

CSS3实现缺角矩形,折角矩形以及缺角边框

首先实现第一种

<div class="bg foldingAngle"></div>
.bg{
  width: 120px;
  height: 80px;
  background: #58a;
}
.foldingAngle{
	background:
		linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em,
	    linear-gradient(-135deg, transparent 1em, #58a 0);
}

效果图

CSS3实现缺角矩形,折角矩形以及缺角边框

linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em
朝左下方向,透明黑色各一半渐变绘制,位置: 100% 0   size: 1.4em 1.4em

如下:

CSS3实现缺角矩形,折角矩形以及缺角边框

size 为1.4em 1.4em 这个三角形是一个45°的直角三角形,直角边长1.4em, 斜边长为 1.4/√2 ≈ 1

所以绘制一个缺角为1em的矩形

linear-gradient(-135deg, transparent 1em, #58a 0)
-135deg 朝左下方向绘制一个缺角矩形

CSS3实现缺角矩形,折角矩形以及缺角边框

两次渐变重叠,所以效果图为:

CSS3实现缺角矩形,折角矩形以及缺角边框

一定要先画小三角,再画缺角矩形,否则矩形会盖住小三角

右下角折角

<div class="bg foldingAngle2"></div>
.foldingAngle2{
	background:
		linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em,
	    linear-gradient(-45deg, transparent 1em, #58a 0);
}

CSS3实现缺角矩形,折角矩形以及缺角边框

这样子看起来有点儿不真实,并且现实中折角不一定都是45°

下面画一个30°的折角,先画一个缺角矩形

<div class="bg foldingAngle2"></div>
.foldingAngle2{
	margin-top: 30px;
    position: relative;
    border-radius: .3em;
	background: linear-gradient(-150deg, transparent 1em, #58a 0);
}

CSS3实现缺角矩形,折角矩形以及缺角边框

接下来画折角

根据上图红色数字,折角宽2/√3 ≈ 1.15em 长:2em 画出折角

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	border-bottom-left-radius: inherit;
}

CSS3实现缺角矩形,折角矩形以及缺角边框

旋转一下

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: rotate(-30deg);
	transform-origin: bottom right; /* 让三角形的右下角成为旋转的中心 */
}

CSS3实现缺角矩形,折角矩形以及缺角边框

上移一下,偏移量为2-1.15=0.85em,再加点阴影

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: translateY(-0.85em) rotate(-30deg);
	transform-origin: bottom right;
	box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
	border-bottom-left-radius: inherit; /* 左下角继承border-radius */
}

CSS3实现缺角矩形,折角矩形以及缺角边框

这样子就是最终的效果

改变角度和长宽计算有些麻烦,可以使用预处理器@mixin,这里只说一下过程,不多叙述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
css3实现背景动态渐变效果
Dec 10 #HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
You might like
PHP环境搭建最新方法
2006/09/05 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jquery实现用户打分评分特效
2015/05/28 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
基于Python正确读取资源文件
2020/09/14 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
搞笑征婚广告词
2014/03/17 职场文书
机械专业技术员求职信
2014/06/14 职场文书
小学清明节活动总结
2014/07/04 职场文书
免职证明样本
2014/10/23 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
生产车间管理制度
2015/08/04 职场文书
Windows7下FTP搭建图文教程
2022/08/05 Servers