css3实现切角图案

实现方式

1. 伪元素实现

<div class="bgc element"></div>

.bgc{width: 120px;height: 80px;background: #58a;
} /* 下文元素都使用了此样式 */.element{position: relative;
}
.element::before {content: '';width: 0;height: 0;position: absolute;right: 0;bottom: 0;border: 5px solid #fff;border-top-color: transparent;border-left-color: transparent;
}
.element::after{content: '';width: 0;height: 0;position: absolute;left: 0;top: 0;border: 5px solid #fff;border-bottom-color: transparent;border-right-color: transparent;
}

2. 渐变实现

<div class="item"></div>

.business_item{width: 450px;height: 710px;border-radius: 5px;background: linear-gradient(-45deg, transparent 75px, #0C5C97 0);position: relative;
}

实现多个角

<div class="bgc corner"></div>

.corner{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 浏览器不支持渐变。 */
}

实现圆弧切角

<div class="bgc corner"></div>

.corner{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;
}

使用csss实现切角矩形，切角矩形，切角边框相关推荐

ios swift 5 UIView切圆角，指定某几个角，2个,左上，左下，右上，右下
文章目录代码注意参考博客: 代码 extension UIView {//radius:切圆角的半径//corner:要切四个角中的哪个角func cornerCut(radius:Int,co ...
独辟蹊径：逆推Krpano切图算法，实现在浏览器切多层级瓦片图
独辟蹊径:逆推Krpano切图算法,实现在浏览器切多层级瓦片图前言 1.功能简介 2.回顾krpano切图 3.krpano切图最常用的方式 4.瓦片地图金字塔模型 ==正片开始== 5.前置知识介 ...
ai怎么切图制作html,APP扁平化设计最强AI切图工具推荐与AI切图教程
目前很多APP设计师使用了AI软件来进行一些扁平化的设计,包括设计APP界面设计.APP引导页界面设计.APP图标设计等等.但是在AI里面切图是非常的不方便.于是,为了解决大家这个烦恼. AI设计师的 ...
计算机视觉（角点检测）- 1 - Harris角点检测
计算机视觉(角点检测)- 1 - Harris角点检测学习前言一.Harris角点检测 1.什么是角点? 2.Harris角点检测的基本原理&基本思想 3.Harris角点检测 ...
《OpenCV3编程入门》学习笔记10 角点检测(二）Shi-Tomasi角点检测
10.2 Shi-Tomasi角点检测 10.2.1 Shi-Tomasi角点检测:goodFeaturesToTrack()函数 1.定义: Harris算法改进,若矩阵M行列式的值与M的迹中较 ...
《OpenCV3编程入门》学习笔记10 角点检测(一）Harris角点检测
第10章角点检测 10.1 Harris角点检测 10.1.1 角点 1.图像特征类型: (1)边缘 (2)角点(感兴趣点) (3)斑点(感兴趣区域) 2.角点定义: (1) 一阶导数(灰度的梯度) ...
WPF画N角芒星，正N角星
计算顶部三角形坐标方法: 1 /// <summary> 2 /// 获取顶三角形坐标 3 /// </summary> 4 /// <param name=" ...
输入法中的全角和半角是什么，角又是什么
角是日语的角,不是中文的角,这里的意思是四边形,日语叫四角形,也有道理,有四个角嘛. 全角就是这个四边形是完全的,也就是方的,中文的字正好是方的. 半角就不用多说了,就是半个四边形,普通的英文字母正好 ...
php字符串处理之全角半角转换(正则匹配全角字符思路)
半角全角的处理是字符串处理的常见问题,本文尝试为大家提供一个思路. 一.概念全角字符unicode编码从65281~65374 (十六进制 0xFF01 ~ 0xFF5E)例如:/[\x{3010} ...
html设置自动切图指定位置,HTML5自助切图
在现在这个到处是HTML5话题的时代,好像不懂点HTML5都有点落伍.那我也跟上潮流一把吧,今天给大家分享的是基于HTML5的自助切图. 在组里经常会被某设计师叫切板仔,确实重构很大一部分工作都花在切 ...

使用csss实现切角矩形，切角矩形，切角边框

在开发的过程会晕倒各种切角的图案，利用css3实现切角图案

css3实现切角图案

实现方式

使用csss实现切角矩形，切角矩形，切角边框相关推荐

最新文章

热门文章