CSS中怎么做缺角矩形效果,方法是什么?
Admin 2022-02-07 群英技术资�
这篇文章给大家分享的是CSS中怎么做缺角矩形的效果,这里我们使用了background属性和linear-gradient()函数,具有一定的参考价值,因此分享给大家做个参考。文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑�
css3怎样实现带边框的缺角矩形
在css中,想要实现带边框的缺角样式,需要利用background属性和linear-gradient()函数�
background属性用于设置元素的背景样式�
linear-gradient()函数用于设置元素的线性渐变样式,只需要这只线性渐变的角度和渐变颜色,就能够将矩形元素设置为缺角的样式�
这时候元素虽然缺角,但是不能使用border样式直接加边框,因为元素只是背景样式便为了缺角的样子,边框仍然是矩形的样式�
我们可以将相同方向的缺角矩形,小的缺角矩形元素放置在大的缺角矩形元素里即可�
示例如下�
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 100px; height: 60px; padding: 4px; background:linear-gradient(135deg,transparent 10px,#2baaca 0); } .box_inner{ width: 100%; height: 100%; background: linear-gradient(135deg, transparent 9px, #fff 0); } </style> </head> <body> <div class="box"> <div class="box_inner"></div> </div> </body> </html>
输出结果�
以上就是关于CSS中怎么做缺角矩形效果的介绍,本文只是提供了一种实现思路,代码仅供参考,需要的朋友可以了解看看,希望对大家学习CSS有帮助,想要了解更多可以继续浏览群英网络其他相关的文章�
文本转载自PHP中文�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
css中,可利用border和“border-top”属性实现一个梯形效果,只需要给元素添加“border:粗细� solid transparent;border-top:梯形高度 solid 梯形颜色;”样式即可�
本篇文章为大家介绍的是html5中的mark标签,文中介绍了包括html5 mark标签中的定义和使用的一些说明,还有,关于html5 mark标签的一些作用和实例代码
这篇文章主要介绍了详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式,主要介绍了三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS支持多种单位形式,如百分比、px、pt、rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem、vh、vw也开始普遍使用,这些单位你可能未必知道,想了解?可以戳此文:CSS�7个你可能不认识的单位。今天在SegmentFault社区碰到了两个关于百分比计算的问题,一个是在translate中使用百分比的时候,是相对于哪个DO ...
可能我们有时候潜意识里认�, 当前实际开发中css属性已经足够用�, 但是前段时间突然想到:"会不会我们只是思维被限制在了常用的css属性中...
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078