01.个人项目难点汇总2 css定制科技感缺角边框

最新推荐文章于 2024-04-24 17:07:17 发布
最新推荐文章于 2024-04-24 17:07:17 发布
阅读量1.5k 收藏 18
点赞数 5
分类专栏： 10.个人项目难点汇总 文章标签： css 科技 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2274001782/article/details/125658594
版权

01.CSS3实现缺角矩形，折角矩形以及缺角边框

前言

前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。

话不多说，放个效果图先

缺角

img

1. 伪元素实现

用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方，如下图，但是这个最多只能弄两个缺角

img

<div class="bg cover"></div>

.bg{
  width: 120px;
  height: 80px;
  background: #58a;
} /* 下文元素都使用了此样式 */
 
.cover{
    position: relative;
}
/* 右下角三角  设置右边和下边三角为白色 上部分和左部分边框为透明色*/
.cover::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 5px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
}
/* 左上角三角  设置左边和上边三角为白色 其他两部分为透明色*/
.cover::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. 渐变实现

CSS语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值描述
direction用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…用于指定渐变的起止颜色。

并且渐变可以接受一个角度（比如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值。

img

45deg: 表示从左下到右上的方向

-45deg: 表示从右下到左上的方向

…

<div class="bg missAngle"></div>

.missAngle{
    background: linear-gradient(-45deg, transparent 10px, #58a 0);
}

img

实现多个角

<div class="bg rect"></div>

.rect{
  background: linear-gradient(135deg, transparent 10px, #58a 0) top left,/* 左上角 起点是透明 10px后具有颜色 填满剩余矩形*/
              linear-gradient(-135deg, transparent 10px, #58a 0) top right,/* 右上角 起点是透明 10px后具有颜色 填满剩余矩形*/
              linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,/* 左上角 起点是透明 10px后具有颜色 填满剩余矩形*/
              linear-gradient(45deg, transparent 10px, #58a 0) bottom left;/* 右上角 起点是透明 10px后具有颜色 填满剩余矩形*/
  background-size: 50% 50%;
  background-repeat: no-repeat;
  /* Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。 */
}

img

这个实际上使用四个图形拼接出来的，如下图

img

background-size: 50% 50%; 表示每个小图形宽50%，高50%

3.弧形切角

<div class="bg cricle"></div>

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

img

最后，Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。

这里有一个问题，拉动浏览器，当宽度被挤压，小于定义宽度时，可能会出现白色的缝隙，这里需要注意一下下，如下图

img

当背景图是一张图片的时候，这时实现缺角的话渐变就不好使了，接下来请出clip-path

4.clip-path实现

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

clip-path: polygon(x y, x1 y1, x2 y2, x3 y3, ...)

x y, x1 y1, x2 y2, x3 y3, … 这些表示坐标轴中的点，根据所有的点绘制一个封闭的图形

<div class="bg rect-clip"></div>

.rect-clip{
  background-image: url(./im.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 
    100% calc(100% - 15px), calc(100% - 15px) 100%,
    15px 100%, 0 calc(100% - 15px), 0 15px)
}

效果图：

img

总宽度为120px``calc(100% - 15px) => 105px``100%        => 120px

img

将对应的点连接起来就构成了一个缺角矩形

clip-path的功能还是蛮强大的，绘制各种各样的形状，菱形，五角星啊等等，比如下图

<div class="bg clip5"></div>

.clip5{
  	margin-left: 30px;
    /*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
    clip-path: inset(0 round 0 25%); /* 可以简写 */
    /* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
    /* inset使用四个值（对应“上 右 下 左”的顺序）来设置圆角半径。 */
}

img

用来做动画

<div class="line-box">
	<div class="line line1"></div>
	<div class="line line2"></div>
	<div class="line line3"></div>
</div>

.line-box{ 	
	width: 100px;
	height: 60px;
}
.line{
	width: 100%;
	height: 100%;
	background: #26b91a;
}
.line1{
	-webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	clip-path: polygon(80% 0, 40% 40%, 80% 80%);
	animation: a 2s 1s infinite;
}
.line2{
	clip-path: polygon(10% 10%, 60% 40%, 50% 90%);
	animation: b 2s 1s infinite;
}
.line3{
	clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%);
	animation: c 2s 1s infinite;
}
@keyframes a{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 40%, 25% 100%, 75% 100%);
	}
}
@keyframes b{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	}
}
@keyframes c{
	90% {
		background: #1f351f;
	}
	100% {
		clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
	}
}

img

这里只列举了clip-path的部分功能，更多形状点这里 ，一个用来生成各种形状（包括随意拖拉自定义）并且可以直接生成代码的网站。

虽然这个能绘制各式形状，但是兼容性却不怎么好，谷歌版本79，火狐71测试正常，IE不可，具体兼容性请看 这里

如果项目需要考虑兼容性问题，也可以放一张图片当作背景图，图片压缩一下，或者只有最多两个缺角使用伪元素，根据项目实际情况选择合适自己的方案

缺角边框

<div class="out-rect">
<div class="in-rect"></div>
</div>

.out-rect {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 80px;
    padding: 5px;
    background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    }
    .in-rect{
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

效果如下：

img

两个缺角矩形叠加的效果，内部矩形宽高跟随父div大小，只要保持垂直居中就好，padding的值为最终呈现的边框的宽度

折角

还是使用渐变linear-gradient实现，在缺角矩形的基础上多了一个折角

效果图如下：

img

首先实现第一种

<div class="bg foldingAngle"></div>

.bg{
  width: 120px;
  height: 80px;
  background: #58a;
}
.foldingAngle{
	background:
		linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em,
	    linear-gradient(-135deg, transparent 1em, #58a 0);
}

效果图

img

linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em
朝左下方向，透明黑色各一半渐变绘制，位置: 100% 0   size: 1.4em 1.4em

如下：

img

size 为1.4em 1.4em 这个三角形是一个45°的直角三角形，直角边长1.4em, 斜边长为 1.4/√2 ≈ 1

所以绘制一个缺角为1em的矩形

linear-gradient(-135deg, transparent 1em, #58a 0)
-135deg 朝左下方向绘制一个缺角矩形

img

两次渐变重叠，所以效果图为：

img

一定要先画小三角，再画缺角矩形，否则矩形会盖住小三角

右下角折角

<div class="bg foldingAngle2"></div>

.foldingAngle2{
	background:
		linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em,
	    linear-gradient(-45deg, transparent 1em, #58a 0);
}

img

这样子看起来有点儿不真实，并且现实中折角不一定都是45°

下面画一个30°的折角，先画一个缺角矩形

<div class="bg foldingAngle2"></div>

.foldingAngle2{
	margin-top: 30px;
    position: relative;
    border-radius: .3em;
	background: linear-gradient(-150dceg, transparent 1em, #58a 0);
}img

](2019122016261779.png)

接下来画折角

根据上图红色数字，折角宽2/√3 ≈ 1.15em 长：2em 画出折角

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	border-bottom-left-radius: inherit;
}

img

旋转一下

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: rotate(-30deg);
	transform-origin: bottom right; /* 让三角形的右下角成为旋转的中心 */
}

img

上移一下，偏移量为2-1.15=0.85em，再加点阴影

.foldingAngle2::before{
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 1.15em;
	height: 2em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
	transform: translateY(-0.85em) rotate(-30deg);
	transform-origin: bottom right;
	box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
	border-bottom-left-radius: inherit; /* 左下角继承border-radius */
}

img

这样子就是最终的效果

改变角度和长宽计算有些麻烦，可以使用预处理器@mixin,这里只说一下过程，不多叙述

02.实例：实现缺角科技框

这里采用的是渐变实现的缺角形状

<!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>
</head>

<body>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .boxBorder1 {
            /* position: absolute;
            top: 50%;
            left: 50%; */
            /* transform: translateX(-50%) translateY(-50%); */
            position: absolute;
            width: calc(470vw * 100 / 1920);
            height: calc(318vh * 100 / 1080);
            /* background: #58a; */
            padding: 5px;
            background: linear-gradient(135deg, transparent 6px, #010540 0) top left,
                linear-gradient(-135deg, transparent 6px, #010540 0) top right,
                linear-gradient(-45deg, transparent 6px, #010540 0) bottom right,
                linear-gradient(45deg, transparent 6px, #010540 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            z-index: auto;
        }
        /* 边框1 border的替代写法 */
        .boxBorder1::before{
            content: '';
            position: absolute;
            top: calc(-3vw * 100 / 1920);
            left: calc(-3vw * 100 / 1920);
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            z-index: -2;
            /* opacity: 70%; */
            background: linear-gradient(135deg, transparent 6px, #1354E3 0) top left,
                linear-gradient(-135deg, transparent 6px, #1354E3 0) top right,
                linear-gradient(-45deg, transparent 6px, #1354E3 0) bottom right,
                linear-gradient(45deg, transparent 6px, #1354E3 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            filter: blur(3px);
        }
        .boxBorder2{
            /* position: absolute;
            top: 0;
            left: 0; */
            position: relative;
            top: 0;
            left: 0; 
            width: 100%;
            height: 100%;
            /* background-color: red; */
            background: linear-gradient(135deg, transparent 6px, #00357B 0) top left,
                linear-gradient(-135deg, transparent 6px, #00357B 0) top right,
                linear-gradient(-45deg, transparent 6px, #00357B 0) bottom right,
                linear-gradient(45deg, transparent 6px, #00357B 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            /* border: 2px solid blue; */
            z-index: auto;
        }
        /* 边框2 border的替代写法 */
        /* z-index负值的层叠顺序在层叠上下文元素背景色之上 */
        .boxBorder2::before{
            content: '';
            position: absolute;
            top: calc(-2vw * 100 / 1920);
            left: calc(-2vw * 100 / 1920);
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            z-index: -1;
            background: linear-gradient(135deg, transparent 6px, red 0) top left,
                linear-gradient(-135deg, transparent 6px, red 0) top right,
                linear-gradient(-45deg, transparent 6px, red 0) bottom right,
                linear-gradient(45deg, transparent 6px, red 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
    </style>
    <div class="boxBorder1 ">
        <div class="boxBorder2">
        </div>
    </div>
</body>

</html>

问题汇总

image-20210925110057412

问题1

.boxBorder2{
    /* position: absolute;
            top: 0;
            left: 0; */
    position: relative;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    /* background-color: red; */
    background: linear-gradient(135deg, transparent 6px, #00357B 0) top left,
                linear-gradient(-135deg, transparent 6px, #00357B 0) top right,
                linear-gradient(-45deg, transparent 6px, #00357B 0) bottom right,
                linear-gradient(45deg, transparent 6px, #00357B 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    /* border: 2px solid blue; */
    z-index: auto;
                                }
/* 边框2 border的替代写法 */
/* z-index负值的层叠顺序在层叠上下文元素背景色之上 */
.boxBorder2::before{
    content: '';
    position: absolute;
    top: calc(-2vw * 100 / 1920);
    left: calc(-2vw * 100 / 1920);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    background: linear-gradient(135deg, transparent 6px, red 0) top left,
        linear-gradient(-135deg, transparent 6px, red 0) top right,
        linear-gradient(-45deg, transparent 6px, red 0) bottom right,
        linear-gradient(45deg, transparent 6px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

image-20210925110611165

问题2

.boxBorder2{
    /* position: absolute;
            top: 0;
            left: 0; */
    position: relative;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    /* background-color: red; */
    background: linear-gradient(135deg, transparent 6px, #00357B 0) top left,
                linear-gradient(-135deg, transparent 6px, #00357B 0) top right,
                linear-gradient(-45deg, transparent 6px, #00357B 0) bottom right,
                linear-gradient(45deg, transparent 6px, #00357B 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    /* border: 2px solid blue; */
    z-index: 2;
                                }
/* 边框2 border的替代写法 */
/* z-index负值的层叠顺序在层叠上下文元素背景色之上 */
.boxBorder2::before{
    content: '';
    position: absolute;
    top: calc(-2vw * 100 / 1920);
    left: calc(-2vw * 100 / 1920);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: 1;
    background: linear-gradient(135deg, transparent 6px, red 0) top left,
        linear-gradient(-135deg, transparent 6px, red 0) top right,
        linear-gradient(-45deg, transparent 6px, red 0) bottom right,
        linear-gradient(45deg, transparent 6px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

image-20210925110810539

解决方案1

注意：使用translate属性会间接使得子元素的层级大于父元素

https://blog.csdn.net/qq_36454089/article/details/107514295

<!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>
</head>

<body>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .boxBorder1 {
            /* position: absolute;
            top: 50%;
            left: 50%; */
            /* transform: translateX(-50%) translateY(-50%); */
            position: absolute;
            width: calc(470vw * 100 / 1920);
            height: calc(318vh * 100 / 1080);
            /* background: #58a; */
            padding: calc(5vw * 100 / 1920);
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #010540 0) top left,
                linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #010540 0) top right,
                linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #010540 0) bottom right,
                linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #010540 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            z-index: auto;
        }
        /* 边框1 border的替代写法 */
        .boxBorder1::before{
            content: '';
            position: absolute;
            top: calc(-2vh* 100 / 1080);
            left: calc(-2vw * 100 / 1920);
            width: calc(100% + 4vh* 100 / 1080);
            height: calc(100% + 4vh* 100 / 1080);
            z-index: -2;
            /* opacity: 70%; */
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #1354E3 0) top left,
                linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #1354E3 0) top right,
                linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #1354E3 0) bottom right,
                linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #1354E3 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            filter: blur(calc(3vw * 100 / 1920));
        }
        .boxBorder2{
            /* position: absolute;
            top: 0;
            left: 0; */
            position: relative;
            top: 0;
            left: 0; 
            width: 100%;
            height: 100%;
            /* background-color: red; */
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #00357B 0) top left,
                        linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #00357B 0) top right,
                        linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #00357B 0) bottom right,
                        linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #00357B 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            /* border: 2px solid blue; */
            /* z-index: 2; */
            transform-style: preserve-3d;
        }
        /* 边框2 border的替代写法 */
        /* z-index负值的层叠顺序在层叠上下文元素背景色之上 */
        .boxBorder2::before{
            content: '';
            position: absolute;
            top: calc(-2vw * 100 / 1920);
            left: calc(-2vw * 100 / 1920);
            width: calc(100% + 4vw * 100 / 1920);
            height: calc(100% + 4vw * 100 / 1920);
            z-index: 1;
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #0768CB 0%) top left,
                        linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #0768CB 0) top right,
                        linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #0768CB 0) bottom right,
                        linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #0768CB 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            transform: translateZ(-1px);
        }
    </style>
    <div class="boxBorder1 ">
        <div class="boxBorder2">
        </div>
    </div>
</body>

</html>

image-20210925155018760

解决方案2

放弃父子元素方式 使用兄弟元素方式

<!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>
</head>

<body>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .boxBorder1 {
            position: absolute;
            width: calc(470vw * 100 / 1920);
            height: calc(318vh * 100 / 1080);
            padding: calc(5vw * 100 / 1920);
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #010540 0) top left,
                linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #010540 0) top right,
                linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #010540 0) bottom right,
                linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #010540 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            z-index: auto;
        }

        /* 边框1 border的替代写法 */
        .boxBorder1::before {
            content: '';
            position: absolute;
            top: calc(-2vh* 100 / 1080);
            left: calc(-2vw * 100 / 1920);
            width: calc(100% + 4vh* 100 / 1080);
            height: calc(100% + 4vh* 100 / 1080);
            z-index: -2;
            /* opacity: 70%; */
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #1354E3 0) top left,
                linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #1354E3 0) top right,
                linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #1354E3 0) bottom right,
                linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #1354E3 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            filter: blur(calc(3vw * 100 / 1920));
        }

        .boxBorder2 {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .test {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #00357B 0) top left,
                        linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #00357B 0) top right,
                        linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #00357B 0) bottom right,
                        linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #00357B 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
            z-index: 2;
        }

        .test2 {
            position: absolute;
            top: calc(-2vw * 100 / 1920);
            left: calc(-2vw * 100 / 1920);
            width: calc(100% + 4vw * 100 / 1920);
            height: calc(100% + 4vw * 100 / 1920);
            z-index: 1;
            background: linear-gradient(135deg, transparent calc(6vw * 100 / 1920), #0768CB 0%) top left,
                        linear-gradient(-135deg, transparent calc(6vw * 100 / 1920), #0768CB 0) top right,
                        linear-gradient(-45deg, transparent calc(6vw * 100 / 1920), #0768CB 0) bottom right,
                        linear-gradient(45deg, transparent calc(6vw * 100 / 1920), #0768CB 0) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
    </style>
    <div class="boxBorder1 ">
        <div class="boxBorder2">
            <div class="test"></div>
            <div class="test2"></div>
        </div>
    </div>
</body>

</html>

最终效果

image-20210925155027473
项目效果
image-20220707141241509

xjt_0901
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
炫酷绚丽的CSS3 SVG文字边框动画特效
06-11
这是一款十分炫酷绚丽的CSS3 SVG文字边框动画特效，看上去有一种led文字动画效果，非常有个性，创意十足！
CSS 实现一个带边框的弧形缺角矩形
beauty_600的博客
12-15 1520
CSS 实现一个带边框的弧形缺角矩形
CSS3 实现发光边框特效
01-18
运行效果： html <!-- This element is not visible. The DOM is generated by JavaScript --> CSS body
CSS3科技感环形菜单动画特效.zip
07-11
代码简介：CSS3科技感环形菜单动画特效是一款蓝色个性的环形二级菜单显示切换代码。
reset.css引入以及1px边框问题的解决方法
09-22
主要给大家介绍了关于reset.css引入以及1px边框问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS科技感四角边框
m0_57391092的博客
12-15 3725
需求：在做大屏数据时经常会看到那些四角边框 效果图： 分析： 1.先画出整个大边框 2.然后用::before和::after分别画出两对边框覆盖大边框的上下左右四边，只留下四个角 实现（示例代码）： <template> <div class="box"> <div class="border_item"></div> </div> </template> <script> expor.
css四种炫酷科技背景边框，颜色渐变，四角特效
热门推荐
lu123ying的博客
09-23 1万+
详见个人博客 1、css四角背景无边边框 代码如下： <div class="BoxWrap"> <div class="horn"></div> </div> .horn{ width: 1000px; height: 500px; margin: 100px; background: linear-gr...
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
“代码农”微信公众号
04-13 1657
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
CSS3实现缺角矩形，折角矩形以及缺角边框
12-28
前言 前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。 话不多说，放个效果图先 缺角   1. 伪元素实现 .bg{ width: 120px; height: 80px; background: #58a; } /* 下文元素都使用了此样式 */ .cover{ position: relative; } .cover::before { content: '';
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
11-09
纯CSS3制作科技感十足的背景发光渐变网页Loading加载动画特效源码.zip
Css 制作div四角边框效果
一个在全能之路上越走越远的男人。
08-30 2545
<li class="inputStyle"> <span></span> <span></span> <span></span> <span></span> </li> inputStyle{ & span:nth-child...
HTML+CSS手写科技感六边形
cautionHua的博客
12-16 1005
最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器，于是就参考网上的思路写了一个这样的六边形。 效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
html css 科技感异形边框,CSS边框外的小三角形+阴影效果的实现。
weixin_42131618的博客
06-16 2193
...虽然是一个很小的问题,但其实还是挺实用的。实现一个边框外的角。用纯CSS来写。一开始实现的效果是这个样子的。 但是这个效果没有办法给他附带阴影，所以换了一种写法。实现成了这个样子 想要实现这个小三角形，不适用icon ，用纯CSS写，其实是利用了border的特性来实现的。..之前都不晓得，后来有人告诉我之后，自己研究了一下才明白的。虽然网上讲的人很多，但是我觉得把自己的收获记录下来才是最棒...
纯css实现科技感十足的方格闪烁背景
Annie的博客
12-25 6950
依然是Vue项目中的效果，GIF图看起来有点卡顿，但实际效果很流畅。代码如下： <div class="main-body"> <span :class="Math.random()<0.3?'animate1':Math.random()>0.6?'animate2':'animate3'" :style="{opa...
45个纯 CSS 实现的精美边框效果【附源码】【上篇】
一起来说说
05-07 7297
边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性，在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果。在以前，简单的边框效果使用 CSS 可以轻松实现，但是用到阴影、弯曲和旋转等复杂效果的时候，我们只能使用图片来实现。如今借助 CSS3 的圆角、阴影和旋转特性，我们完全可以使用纯 CSS 代码实现精美的边框效果。 　　下面展示的都是精心编写的 CSS 边框效果演示，相信您一定
csshover效果图片从直角变为缺角 clip-path: polygon（）
BoKungg的博客
05-08 202
img src="img/QQ图片20220915182639.jpg" alt="">点击之后进行hover效果图片的左上以及右下角会收缩进去会有动画效果。
理解CSS中的sticky与fixed定位
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 420
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
Three CSS2D 渲染器 月球绕地球旋转
最新发布
n_229397218的博客
04-24 458
2D 渲染器 DOM 挡住了轨道控制器要监听的 canvas 画布，发现鼠标无法触发轨道控制器影响相机移动了，把轨道控制器监听的 DOM 改成 2D 渲染器的 DOM，让 2D 渲染器的 DOM 不交互任何鼠标事件，让鼠标可以摸到后面一层的 canvas 标签。渲染器是生成一个 DIV 容器，它的作用是能把 HTML 元素绑定到三维物体上，在 DIV 容器中各自的 DOM 元素分别封装到 CSS2DObject 的实例中，并在 scene 中增加。1、引入 CSS2D 渲染器和创建物体的构造函数。
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 属性同样需要考虑兼容性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值