CSS3实现缺角矩形

已于 2022-02-24 20:01:36 修改
阅读量3.6k 收藏 23
点赞数 3
分类专栏： 开发百宝箱系列 文章标签： css3 css html
于 2022-02-24 20:01:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaofengzong/article/details/123117735
版权

CSS3实现缺角矩形

前言

很多同学在进行Web页面开发时，总是非常依赖美工的切图，其实有很多简单的样式效果都可以使用CSS3来实现，下面以渲染缺角矩形的实际场景来简单聊聊。

一、实现的最终效果

在这里插入图片描述
很简单、常见的一个小面板集合显示。

二、多种实现方式举例

1.最low的方式：拿div通过旋转定位盖死一个角

最容易想到的方法，我不想实现了，没啥意思，很难看。

2.也很low的方式：使用div对象的before、after伪元素实现

思路跟第一种方法基本一致，唯一的改进就是不需要引入多余的无用div。使用元素的before、after伪元素去做一个三角形盖住角，但问题在于最多只能支持两个角，因为就两个伪元素。另外，背景颜色是写死的，换个背景颜色那个角就现出原形了。
实现效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用伪元素实现缺角矩形</title>
</head>
<style>
  body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body .panel{
    width: 100px;
    height: 75px;
    background-color: #C42D2D;
    position: relative;
  }
  body .panel::before{
    width: 0px;
    height: 0px;
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    border: 10px solid #FFF;
    border-bottom-color: transparent;
    border-right-color: transparent;
  }
</style>
<body>
  <div class="panel"></div>
</body>
</html>

3.比较好的方式：渐变实现

CSS语法：

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

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

在这里插入图片描述
45deg: 表示从左下到右上的方向
-45deg: 表示从右下到左上的方向

圆盘中箭头所指向的方向，就是这个渐变的起始与终点方向。不好理解吧？来几个例子就好理解了

background-image: linear-gradient(135deg, transparent 10px, #F07D17 0);
效果：对应圆盘中的135deg的指向，是不是就很明白了，要缺哪个角就去查一下把，试一下把。
而且我特意换了个背景，毫无违和感。
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用渐变实现缺角矩形</title>
</head>
<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3CBC81;
  }

  body .panel {
    width: 100px;
    height: 75px;
    background-image: linear-gradient(135deg, transparent 10px, #F07D17 0);
  }
</style>

<body>
  <div class="panel"></div>
</body>

</html>

如果要四个角都缺的话，如下所示：我也附上代码。
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用伪元素实现缺角矩形</title>
</head>
<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3CBC81;
  }

  body .panel {
    width: 100px;
    height: 75px;
    background: linear-gradient(135deg, transparent 10px, #F07D17 0) top left,
      linear-gradient(-135deg, transparent 10px, #F07D17 0) top right,
      linear-gradient(-45deg, transparent 10px, #F07D17 0) bottom right,
      linear-gradient(45deg, transparent 10px, #F07D17 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }
</style>

<body>
  <div class="panel"></div>
</body>

</html>

其实就是四个矩形合并起来，不信给每个渐变设置不同的颜色：
在这里插入图片描述
简单把？
还有更高级的，使用渐变实现的话，背景只能是颜色，如果我们的div的背景是一张图片的话，渐变就不好使了呢。下面学点新的吧。

4.比较好的方式：clip-path实现

clip-path字面意思就是按路径进行裁剪。就像剪纸呗。如果说之前这个属性兼容性很差，现在都已经2022年了，拥抱现代浏览器吧。

clip-path: polygon(100px 0, calc(100% - 100px) 0, 100% 100px,
100% calc(100% - 100px), calc(100% - 100px) 100%,
100px 100%, 0 calc(100% - 100px), 0 100px);

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用clip-path实现缺角矩形</title>
</head>
<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3CBC81;
  }

  body .panel {
    width: 500px;
    height: 500px;
    background-image: url(./img.png);
    background-color: #FFF;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clip-path: polygon(100px 0, calc(100% - 100px) 0, 100% 100px,
        100% calc(100% - 100px), calc(100% - 100px) 100%,
        100px 100%, 0 calc(100% - 100px), 0 100px);
  }
</style>

<body>
  <div class="panel"></div>
</body>

</html>

clip-path属性还有很多内容，很多功能，感兴趣的可以去学习一下，由于时间关系，不在这里展开了。
文章中用到了一些图片，放到最后。
在这里插入图片描述

啊实打实
最后附上文章最初要实现的那个panel的代码：很简单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container .panel {
      width: 100px;
      height: 75px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      margin: 10px;
    }

    .container .panel .top {
      flex: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #794391;
      background: linear-gradient(135deg, transparent 10px, #794391 0);
    }

    .container .panel .top .left-img {
      width: 24px;
      height: 30px;
      background-image: url(./icon.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 5px;
    }

    .container .panel .top .right-vol {
      font-weight: 550;
      color: #FFF;

    }

    .container .panel .bottom {
      flex: 2;
      background-color: #E8E8E8;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel">
      <div class="top">
        <div class="left-img"></div>
        <div class="right-vol">550kV</div>
      </div>
      <div class="bottom">江阴火电厂</div>
    </div>
    <div class="panel">
      <div class="top">
        <div class="left-img"></div>
        <div class="right-vol">550kV</div>
      </div>
      <div class="bottom">江阴火电厂</div>
    </div>
    <div class="panel">
      <div class="top">
        <div class="left-img"></div>
        <div class="right-vol">550kV</div>
      </div>
      <div class="bottom">江阴火电厂</div>
    </div>
    <div class="panel">
      <div class="top">
        <div class="left-img"></div>
        <div class="right-vol">550kV</div>
      </div>
      <div class="bottom">江阴火电厂</div>
    </div>
  </div>
</body>

</html>

总结

byebye

是小宗啊？
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
css三角形的制作
MRSLLLL_的博客
04-21 436
css制作三角形的原理很简单，主要就是将盒子的宽高设为0，加上边框的宽度和颜色 分解步骤给大家看一下，先定义一个宽高10px的灰色黑字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &...
css实现箭头和带缺口提示框
wangxiuyan0228的博客
06-19 1632
一、实现如图所示箭头&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .out{ width: 200px; height: 200px; background: #f00; position: relative; } .w
利用css中的border属性创建一个类似正方形缺失一角及带边框三角形的效果
weixin_38660883的博客
08-14 8007
最近研究了下css中的border属性，觉得功能很强大，可以制作各种三角形，正好设计有需求，于是就写了一个CSS效果。代码如下： css样式部分： &lt;style&gt; body{ background:#f2f2f2; } .border{ position: relative; margin-top:300px...
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角，右上角添加角标)
leng0920的博客
11-13 6334
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角，右上角添加角标)
CSS3实现缺角矩形，折角矩形以及缺角边框
12-28
前言 前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。 话不多说，放个效果图先 缺角   1. 伪元素实现 .bg{ width: 120px; height: 80px; background: #58a; } /* 下文元素都使用了此样式 */ .cover{ position: relative; } .cover::before { content: '';
CSS3绘制圆角矩形的简单示例
09-24
主要介绍了CSS3绘制圆角矩形的简单示例,注意一下各浏览器对CSS3的兼容性,需要的朋友可以参考下
CSS3实现缺角矩形，缺角边框以及折角矩形
HuangsTing的博客
08-07 1万+
项目中经常用到不规则的背景或边框，最直接的解决方案是通过切图或用伪类before、after遮挡，但是这两种方法都有弊端，索性花时间整理学习一下更好的解决方案，方便取用。 本文主要介绍通过背景渐变和clip-path实现，伪类实现的方法不再赘述。 一、缺角矩形 使用css3渐变实现缺角矩形，linear-gradient相关属性介绍移步官网。 <div class="box"></div> <style> .box{ width: 100px.
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
04-13 1754
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
CSS3实现光感圆圈动画特效代码
03-20
CSS3实现光感圆圈动画
CSS3实现swap交换动画
09-24
主要为大家介绍了CSS3实现swap动画，实现一个交换动画，一个笑脸慢慢从远处，回到自己的原来位置的一种效果，这种动画在JS里面也是很多见的，感兴趣的小伙伴们可以参考一下
css3实现圆角矩形
04-11
css3实现圆角矩形 使用border-radius实现圆角，兼容到IE6
（转载）CSS3实现缺角矩形，折角矩形以及缺角边框
最新发布
qq_41822157的博客
08-18 308
CSS3实现缺角矩形，折角矩形以及缺角边框
纯css 实现 三角形、梯形等 效果
weixin_30362083的博客
06-01 505
　　今天一个刚开始学习html 的小白问我一个问题，css 可以实现正方形，长方形，和圆型（border-radius），怎么能做出个三角形、梯形等等形状呢？于是我便开启了装逼模式， 给他讲解了一下我的思路，在我的帮助下， 他终于用css 做出了自己的三角形、梯形。我表示很欣慰， 于是，为了帮助更多像我这个朋友一样基础的小白，我决定献丑，把我的思路，和做法写成一篇博文，分享给大家。 　　闲...
css实现三角形，div实现三角形缺口
搬砖小鱼，请多指教呦
04-24 3152
1、css实现三角形 有时候面试题或者日常需求中会有用纯css来实现三角形的例子，目前本人的知识量只能提供两种方案 首先是第一种，也是最常用的就是border法 1-1 border实现三角形 div{ border:40px solid; border-left-color: lightslategrey; border-right-color: l...
css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框
weixin_29129833的博客
12-23 1511
前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找ui小哥聊聊天，忽然灵光一闪，想起之前翻过的《css揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角1. 伪元素实现.bg{width: 120px;height: 80px;background: #58a;} /* 下文元素都使用了此样式 */.cover{position: r...
css实现有缺口的border
qq_45030898的博客
07-28 950
css实现有缺口的border
SpringBoot分离打包：将jar包与lib依赖、配置文件分开
热门推荐
是小宗啊？的博客
11-07 1万+
文章目录一、前言二、正文1.整个项目的目录结构2.系统环境变量配置3.pom文件配置——本文重点，其它部分甚至不用看4. 打包5.测试，测试依赖于前两篇所构建的测试项目，当然这不重要三、总结 一、前言 昨天和项目组内一位经验丰富的老师傅探讨，围绕着SpringBoot打包后动不动就一百多兆，在现场远程维护部署时非常不方便的问题，进行了一番请教。问题的根本是：有时候仅仅改动了一点点东西，却要发给现场替换包含所有依赖的jar包，这非常的笨重不方便。 于是又学到了新知识。抽空浏览了网上的资料，结合工作中的实际使用
css3实现缺角四边形边框
06-06
你可以使用 CSS3 的 clip-path 属性和 border-image 属性来实现缺角四边形边框的效果。 首先，使用 clip-path 属性来定义多边形的形状，可以实现缺角四边形的效果。然后，使用 border-image 属性来设置边框的样式。具体实现如下： ```css .element { width: 200px; height: 200px; background-color: transparent; clip-path: polygon(0 20%, 20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%); border-width: 10px; border-image: url(border-image.png) 30 round; } ``` 其中，border-width 属性用于设置边框的宽度，border-image 属性用于设置边框的图片和样式。在这里，我们将边框图片设置为 border-image.png，设置了一个圆角半径为 30px，并且使用 round 属性让图片的边缘自适应边框的形状。 需要注意的是，clip-path 属性在某些浏览器中可能不被支持，需要进行兼容性处理。border-image 属性同样需要考虑兼容性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是小宗啊？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值