css实现缺角div

最新推荐文章于 2023-02-02 14:32:40 发布
最新推荐文章于 2023-02-02 14:32:40 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jarisMA/article/details/106014377
版权
本文介绍了使用CSS创建缺角div的两种方法：一是通过伪元素画出相同背景色的三角形进行遮挡，适用于最多两个缺角的情况；二是利用`linear-gradient`渐变实现，可以创建一个或四个角的缺角效果。
摘要由CSDN通过智能技术生成

css实现缺角div

<div class="block"></div>

方法一：伪元素实现

用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方
eg:

  .block{
   
    width: 120px;
    height: 60px;
    background: yellow;
    position: relative;
  }
  
  .block::before{
   </
最低0.47元/天 解锁文章
jarisMA
关注
专栏目录
css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框
weixin_29129833的博客
12-23 1613
前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找ui小哥聊聊天，忽然灵光一闪，想起之前翻过的《css揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角1. 伪元素实现.bg{width: 120px;height: 80px;background: #58a;} /* 下文元素都使用了此样式 */.cover{position: r...
Web前端之Css实现缺角功能、clipPath属性、形状、渐变、旋转、矩形、边框、折角
最新发布
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-13 2325
Web前端之Css实现缺角功能、clipPath属性、形状、渐变、旋转、矩形、边框、折角
css实现三角形，div实现三角形缺口
搬砖小鱼，请多指教呦
04-24 3255
1、css实现三角形 有时候面试题或者日常需求中会有用纯css来实现三角形的例子，目前本人的知识量只能提供两种方案 首先是第一种，也是最常用的就是border法 1-1 border实现三角形 div{ border:40px solid; border-left-color: lightslategrey; border-right-color: l...
CSS3实现缺角矩形，折角矩形以及缺角边框
12-28
前言 前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。 话不多说，放个效果图先 缺角   1. 伪元素实现 .bg{ width: 120px; height: 80px; background: #58a; } /* 下文元素都使用了此样式 */ .cover{ position: relative; } .cover::before { content: '';
缺角的DIV
weixin_30817749的博客
08-12 523
如何让方方正正的DIV缺了一角? 首先想到的 利用before/after伪元素的绝对定位并让它的背景颜色和外部颜色保持一致, 用这种方法的好处在于你可以同时使用:before和:after在DIV上实现两个缺角 代码如下: .block{ background:gray; height:60px; width:60px; position: relative...
css实现缺少一角的div
weixin_38242636的博客
11-17 2417
先建一个div，设置宽高背景色后，给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，开启定位，定位到需要去除的那个角就完成了（其实是只是将那个角盖住而已） <body> <div class="box"></div> </body> .box { position: relative; width: 200px; height: 200px; background-image: lin
如何用CSS写一个缺角的div（附源码）
刺心的博客
09-06 4037
今天用CSS写一个缺角的div，大致的效果是这样的，div的左上角和右上角缺掉了一块的效果，简称为缺角div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
css3 div缺一角样式布局
ICode联盟
06-18 494
下载地址css3实现的div缺一角样式布局，少一块三角形样式。dd:
CSS：一个div实现折角效果
xiaciyidingo的博客
02-02 769
CSS实现折角效果
css 一口气实现切角+边框+投影+内容背景色渐变
denglouhen的博客
10-26 1374
单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。 看一下最终要实现的效果： 首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了，效果和代码如下： <html> <body> <div class=..
CSS3实现缺角矩形
是小宗啊？的博客
02-24 4397
CSS3实现缺角矩形前言一、实现的最终效果二、多种实现方式举例1.最low的方式：拿div通过旋转定位盖死一个角2.也很low的方式：使用div对象的before、after伪元素实现3.比较好的方式：渐变实现4.比较好的方式：clip-path实现总结 前言 很多同学在进行Web页面开发时，总是非常依赖美工的切图，其实有很多简单的样式效果都可以使用CSS3来实现，下面以渲染缺角矩形的实际场景来简单聊聊。 一、实现的最终效果 很简单、常见的一个小面板集合显示。 二、多种实现方式举例 1.最low的方式
css3实现缺角四边形_用css3实现一个带缺口的圆圈（图）
weixin_42407617的博客
12-23 1268
Document.box{margin:300px;position:relative;}.box1 {width:100px;height:100px;background-color:transparent;border:3px solid #F00;border-radius:60px;margin-top:20px;}.box2 {width:60px;height:60px;backgr...
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角，右上角添加角标)
leng0920的博客
11-13 7672
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角，右上角添加角标)
李居明风水人人都懂版之十二～缺角
搜源的博客
08-11 8083
所谓的“缺角”，乃是建筑物的一边短缺三分之二以内，而呈凹入的部分。凹入的部分越大，运气越差。最理想的屋子形状，首推六比四的长方形住宅，尤其是以东西方呈长方形的最好。但是现在的房子，总免不了某一边凸出，某一边凹入，这凹入的部分，也就是缺角部分，往往会造成凶相。  在现代家庭中，很难找到一间屋不缺角，因为现代的房屋大多数不是四方形。不过，屋子形成缺角，可依缺角的方位，来决定修补的方法，比如，当东北与西
CSS写一个缺角的div
祈澈菇凉
08-19 5173
今天用CSS写一个缺角的div，大致的效果是这样的，div的左上角和右上角缺掉了一块的效果，简称为缺角div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...
纯css在div上添加小三角
qq_43555948的博客
04-21 6999
纯css在div上添加小三角 有些项目中会遇到这样的需求，就是div容器上要突出来一个小三角，如下图 虽然在功能上没啥意义，但是人家UI就是要这个小三角，你能怎么办，咱必须给他整出来！ 我们用伪类和border来画这个小三角。 .box {//首先准备一个div height:100px; width:100px; background: white; position: relative; } .box::before { //这里就是小三角了 content: ""; dis
径向渐变做缺角效果
weixin_34205826的博客
12-21 322
缺角效果 效果 话不多说直接上设计稿 不仔细的前端开发者稍不注意就会忽略一些细节，尤其是两个缺角效果就不会完美的实现。 圆角实现 这个页面的主体是两个圆角的盒子组成，有些图方便或者不仔细的前端开发者可能就直接两个盒子贴合。 为了方便，我们不实现设计稿中的全部细节，只将其中最重要的部分提出来用以说明问题，html结构如下： &lt;div class="container"&gt; &lt;d...
CSS 边框添加四个角的效果
xuexi0754的博客
11-21 908
CSS 边框添加四个角的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值