【css】实现切角

最新推荐文章于 2023-03-31 17:33:42 发布
最新推荐文章于 2023-03-31 17:33:42 发布
阅读量2.7k 收藏 10
点赞数 3
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/108431234
版权

文章目录

渐变实现切角
两个切角
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

div{
    margin: 50px;
    width: 200px;
    height: 100px;
}
.box{
    background-image: linear-gradient(-45deg,transparent 10px,lightskyblue 0);  
    background-size: 50% 100%;
    background-position: right;
}
.box2{

    background-image: linear-gradient(45deg,transparent 10px,lightskyblue 0);
    background-size: 50% 100%;
    background-position: left;
}
.box3{
    background-image: linear-gradient(-45deg, transparent 10px, lightskyblue 0);
    background-size: 50% 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.box4{
    background-image: linear-gradient(45deg,transparent 10px, lightskyblue 0);
    background-size: 50% 100%;
    background-position: left;
    background-repeat: no-repeat;
}
.box5{
    /* background-image: linear-gradient( 45deg,transparent 10px,lightskyblue 0),
                      linear-gradient(-45deg,transparent 10px,lightskyblue 0);
    background-size: 50% 100% , 50% 100%;
    background-position: left,right;
    background-repeat: no-repeat, no-repeat; */
    background: linear-gradient( 45deg,transparent 10px,lightskyblue 0) left/50% 100% no-repeat,
                linear-gradient(-45deg,transparent 10px, lightskyblue 0) right/50% 100% no-repeat;
}

在这里插入图片描述
background简写中，注意，background-position/background-size

四个切角
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box"></div>
</body>

    div{
        width: 200px;
        height: 100px;
        border: 1px solid lightgray;
        margin: 5px;
    }
    .box1{
        background-image: linear-gradient(135deg,transparent 10px,lightskyblue 0);
        background-size: 50% 50%;
        background-position: left top;
        background-repeat: no-repeat;
    }
    .box2{
        background-image: linear-gradient(-135deg,transparent 10px,lightskyblue 0);
        background-size: 50% 50%;
        background-position: right top;
        background-repeat: no-repeat;
    }
    .box3{
        background-image: linear-gradient(45deg,transparent 10px,lightskyblue 0);
        background-size: 50% 50%;
        background-position: left bottom;
        background-repeat: no-repeat;
    }
    .box4{
        background-image: linear-gradient(-45deg,transparent 10px,lightskyblue 0);
        background-size: 50% 50%;
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .box{
        background:linear-gradient(135deg,transparent 10px,lightskyblue 0) left top,
                   linear-gradient(-135deg,transparent 10px,lightskyblue 0) right top,
                   linear-gradient(-45deg,transparent 10px,lightskyblue 0) right bottom,
                   linear-gradient(45deg,transparent 10px,lightskyblue 0) left bottom;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

在这里插入图片描述

圆弧切角
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>

 div{
     margin: 5px;
     width: 200px;
     height: 100px;
     border: 1px solid lightgray;
 }
 .box{
     background-image: radial-gradient(transparent 50px,lightskyblue 0);
 }
 .box1{
     background-image: radial-gradient(circle,transparent 50px,lightskyblue 0);
 }
 .box2{
     background-image: radial-gradient(circle at left top,transparent 50px,lightskyblue 0);
 }
 .box3{
     background-image: radial-gradient(circle at right top,transparent 50px,lightskyblue 0) ;
 }
 .box4{
     background-image: radial-gradient(circle at right bottom,transparent 50px,lightskyblue 0 );
 }
 .box5{
     background-image: radial-gradient(circle at left bottom,transparent 50px,lightskyblue 0);
 }
 .box6{
     background: radial-gradient(circle at left top,transparent 30px,lightskyblue 0) left top,
                       radial-gradient(circle at right top,transparent 30px,lightskyblue 0) right top,
                       radial-gradient(circle at right bottom,transparent 30px,lightskyblue 0) right bottom,
                       radial-gradient(circle at left bottom,transparent 30px,lightskyblue 0) left bottom;
     background-size: 50% 50%;
     background-repeat: no-repeat;
 }

在这里插入图片描述

SVG+border-image实现切角
<body>
    <svg xmlns="http:/www.w3.org/2000/svg" width="30" height="30" fill="lightskyblue">
        <polygon points="10,0 20,0 30,10 30,20 20,30 10,30 0,20 0,10"/>
    </svg>
</body>

在这里插入图片描述

<body>    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

 div{
     margin: 5px;
 }
 .box1{
     width: 200px;
     height: 100px;
     background-color: lightgoldenrodyellow;
     border: 20px solid transparent;
     border-image: url('data:image/svg+xml,\
         <svg xmlns="http://www.w3.org/2000/svg"\
         width="3" height="3" fill="lightskyblue">\
             <polygon points="1,0 2,0 3,1 3,2 2,3 1,3 0,2 0,1"/>\
         </svg>');        
 }
 .box2{
     width: 200px;
     height: 100px;
     background-color: lightgoldenrodyellow;
     border: 20px solid transparent;
     border-image: url('data:image/svg+xml,\
         <svg xmlns="http://www.w3.org/2000/svg"\
         width="3" height="3" fill="lightskyblue">\
         <polygon points="1,0 2,0 3,1 3,2 2,3 1,3 0,2 0,1"/>\
         </svg>');
     border-image-slice:1;
 }
 .box3{
     width: 200px;
     height: 100px;
     background-color: lightskyblue;
     background-clip: content-box;
     border: 20px solid lightskyblue;
     border-image: url('data:image/svg+xml,\
         <svg xmlns="http://www.w3.org/2000/svg"\
         width="3" height="3" fill="lightskyblue">\
         <polygon points="1,0 2,0 3,1 3,2 2,3 1,3 0,2 0,1"/>\
         </svg>');
     border-image-slice:1;
 }

在这里插入图片描述

clip-path实现切角
<body>
    <div class="box"></div>
</body>

.box{
    width: 200px;
    height: 100px;
    background-color: lightskyblue;
    clip-path: polygon(20px 0,calc(100% - 20px) 0,
                        100% 20px, 100% calc(100% - 20px),
                        calc(100% - 20px) 100%, 20px 100%,
                        0 calc(100% - 20px), 0 20px);
}

在这里插入图片描述

richest_qi
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS 实现切角效果
郊眠寺
05-24 2103
最近项目中看到这样的一个切角效果，如下所示 就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？ 一、自适应方式 这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求 1. 固定距离 无论宽高怎么变化，切角距离顶部的距离是固定的，如下 2. 固定角度 无论宽高怎么变化，切角与顶部的夹角是固定的，如下 下面具体来看这两种布局的实现 二、固定距离的切角 固定距离的比较好实现，只需要借助 clip-path就可以了。假设距离顶部的距离是20px，那么四个点
CSS3实现三种切角效果
木子木木的专栏
09-10 1万+
效果一： 代码：&lt;div class="cornerCut"&gt;corner cutcorner cutcorner cutcorner cut&lt;/div&gt;  CSS： .cornerCut{ width:200px; margin: 10px 20px; height: 200px; background:#58a; color:#fff; text-...
css切角实现
qq_48312855的博客
04-26 751
代码 .up_down-css { padding: 0 10px 0 10px; color: #1a73cc; border: 1px solid #1a73cc; // 裁剪矩形 clip-path: polygon( 0 0, calc(100% - 5px) 0, 100% 5px,
使用csss实现切角矩形，切角矩形，切角边框
qq_38181746的博客
07-20 1823
css3实现切角图案
CSS图片裁剪：实现切角效果
YanHSama的博客
05-28 2024
固定距离 img { border: 1px gray solid; width: 400px; height: 200px; clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%); } img { border: 1px gray solid; width: 400px; height: 200px; clip-path: polygon(0 0, 100% 0, 10
纯css3模拟单张图片切角固定效果特效代码
03-20
【纯CSS3模拟单张图片切角固定效果特效代码】是一种利用CSS3的强大功能来实现图形效果的技术。在网页设计中，我们有时需要为图片添加独特的视觉效果，比如切角，传统的实现方式可能需要借助图像编辑软件，但通过CSS3...
纯css3模拟单张图片切角固定效果.zip
07-04
【标题】：“纯css3模拟单张图片切角固定效果”是利用CSS3中的linear-gradient属性来实现一种独特的视觉效果，它可以将一张图片的角落进行切割，呈现出非传统的边角形状，同时保持其他部分的正常显示。这个技术在...
CSS实现镂空效果的示例代码
12-13
在CSS中实现镂空效果是一种常见的网页设计技巧，可以用于创建独特的优惠券、标签或者其他具有视觉吸引力的元素。本文将详细解析如何通过CSS渐变来实现这种效果，并提供相关的示例代码。 首先，我们来看一下核心的...
CSS3实现各种图形的示例代码
09-24
在CSS3中，我们可以利用各种属性来创建丰富的图形，这些图形包括但不限于自适应的椭圆、运动的椭圆、半椭圆、平行四边形以及切角矩形等。以下是对这些图形实现方法的详细解释： 1. **自适应的椭圆**： 使用`border...
老外用css实现圆角边框
08-25
老外用css实现圆角边框，纯css，简单易懂，看了就明白
不规则多边形绘制（切角效果、任意效果） css clip-path使用
qq_44537625的博客
02-23 832
clip-path 中polygon（）函数属性
【css】用渐变模拟边框制作四周切角的div
KatyLight的博客
06-24 430
【css】用渐变模拟边框制作四周切角的div
css实现平角切角和弧形切角效果
热门推荐
小圣贤君的博客
09-06 1万+
在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。 切单一角： background: #58a; background: linear-gradient(-45deg, transparent 15px, #58a 0);采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效
矩形切角样式
weixin_53465412的博客
03-22 378
视图层搭一个架子： <div class="part"></div> 然后在CSS处使用linear-gradient，具体如下： .part { width: 200px; height: 100px; background: #1AB0F0; color: #fff; background: linear-gradient(135deg, transparent 15px, #1AB0F0 0) top ...
html边框平角,在css中实现平角、弧形切角的样式方法
weixin_34343610的博客
07-03 719
在web设计中，有时候会碰到一些切角的样式需求，实现方法有很多种，用图片也好，结点叠加覆盖也好，都可以实现切角的样式，这里笔者直接用css来实现切角的样式。切单一角：background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);采用如上所示css就可以实现样式，修改角度就可以实现任一角度的切角效果。切两...
css切割clip-path简单教程
时光的博客
08-10 1971
clip-path:polygon(50% 0, 100% 50%,50%,100%,0,50%); 这是一个菱形    这四个参数分别为上右下左   它的意思是 第一个参数(上)x(水平线)轴为50%的位置，Y(垂直线)轴为0 也就是顶部尖角那个位置, 第二参数(右)x(水平线)轴为100%的位置，Y(垂直线)轴为50% 也就是右边尖角那个位置, 第三个参数(下)x(水平线)轴为50...
css圆切成4等分做边角效果，丿的弧形效果、半月等效果。
qq_43426246的博客
03-31 846
画半月和凹陷样式的css、一个简单的css样式例子
玩转 CSS Border-Image
奇舞周刊
02-15 752
~欢迎点击上方蓝字「歪码行空」快速关注~???? 尴尬的是本文也并不是陪读系列文章，而是歪马在进行第五章《漂亮的盒子》时，有感而发。读到书中介绍border-radius的内容时，提到了...
如何实现切角的渐变
最新发布
05-25
要实现切角的渐变，可以使用 CSS 的线性渐变（linear-gradient）或径向渐变（radial-gradient）属性。以下是使用线性渐变的示例： ``` background: linear-gradient(to bottom right, #ffffff 0%, #ffffff 70%, #000000 70%, #000000 100%); ``` 这个样式将会在背景上从左上角到右下角添加一个渐变。渐变的起点是白色 (#ffffff)，结束点是黑色 (#000000)。在 70% 的位置停止渐变，并使用白色 (#ffffff) 填充该位置。这样，就会出现一个切角的效果。 你可以根据需要调整颜色和位置，以实现你想要的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值