实现锯齿边框的糖纸

最新推荐文章于 2024-05-28 13:09:25 发布
最新推荐文章于 2024-05-28 13:09:25 发布
阅读量257 收藏
点赞数 2
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PeRo_AG/article/details/115382964
版权

实现锯齿边框的糖纸

先创建个容器，作为糖纸的主体

<body>
    <!-- 糖纸 -->
    <section></section>
</body>

接下来就是 CSS 部分了。

设置下糖纸的宽高，再让它居中一下。后面子元素要用到绝对定位，所以先加上相对定位。

section {
    position: relative;
    width: 400px;
    height: 200px;
    margin: 100px auto;
}

我们得给糖纸加个靓一点的背景图

section {
	/* 背景图和渐变的滤镜 */
    background: url(../img/bg.jpeg) no-repeat,
                linear-gradient(45deg, #ff3479, #ffc107);
    /* 设置背景图的融合方式 */
    background-blend-mode: soft-light;
    /* 背景图尺寸和定位 */
    background-size: cover;
    background-position: center;
}

看下效果。
嗯。。。这糖看起来会很酸
在这里插入图片描述

好了现在到重点的地方了——锯齿边框。

用 CSS 伪元素的方式给糖纸添加边框

/* 上边框 */
section::before {
    content:'';
    /* 定位到左上角 */
    position: absolute;
    top: 0;
    left: 0;
    /* 宽度设置与父元素相等,再设置一个高度 */
    width: 100%;
    height: 20px;
    display: block;
}

锯齿是显示一格空一格，我们可以利用 CSS 渐变来实现

section::before {
	/* 
		1、透明一格，再用白色覆盖一格。并让它X轴方向平铺
		2、渐变方向设置成45°
		3、设置背景的大小
	*/
    background: linear-gradient(45deg,  transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x;
    background-size: 20px 40px;
}

在这里插入图片描述

再加上一个-45°的渐变，让它形成小三角形（锯齿状）。

section::before {
    background: linear-gradient(45deg,  transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x，
                linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%)  repeat-x; 
}

在这里插入图片描述

伪元素整体旋转180°，让锯齿向外。

section::before {
    transform: rotate(180deg);
}

在这里插入图片描述
Nice! 上边框完成！

接着是下边框。

其实下边框也是一样的方法。我们只需要再添加个伪元素，把它定位到底部；
下面的锯齿默认就是朝下的，所以就不需要旋转伪元素了。

section::after {
    content:'';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: block;
    background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%) repeat-x,
                linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%) repeat-x;
    background-size: 20px 40px;
}

最终效果：
在这里插入图片描述

以下为源码：

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>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 糖纸 -->
    <section></section>
</body>
</html>

CSS 部分


/* 简单重置一下默认样式 */
* { margin: 0; padding: 0;}

/*** 糖纸样式 ***/
section {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background: url(../img/bg.jpeg) no-repeat,
                linear-gradient(45deg, #ff3479, #ffc107);
    background-blend-mode: soft-light;
    background-size: cover;
    background-position: center;
}

/*** 上边框 ***/
section::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: block;

    background: linear-gradient(45deg,  transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%) repeat-x,
                linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.66%, transparent 66.66%)  repeat-x;
    background-size: 20px 40px;
    transform: rotate(180deg);
}

/*** 下边框 ***/
section::after {
    content:'';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    display: block;

    background: linear-gradient(45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%),
                linear-gradient(-45deg, transparent 33.33%, #fff 33.33%, #fff 66.666%, transparent 66.666%);
    background-size: 20px 40px;
}

第一次发博客，欢迎指正！

剑吾意
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css 上下边框锯齿效果,关于CSS实现锯齿效果
weixin_39747615的博客
08-03 626
可以使用canvas实现canvas 图片锯齿body {background: #D3D3D3;}canvas {border: 1px solid;}var c = document.getElementById("MyCanvas"),cxt = c.getContext("2d"),image = new Image();var r = 5;//锯齿半径image.src = "http:...
html怎么设置锯齿边框样式,CSS3实现边框锯齿效果
weixin_39973410的博客
06-19 919
通过CSS3的linear-gradient实现的.bg{width:300px;height:50px;background:#caca8c;background-image:-webkit-gradient(linear,50%0,0100%,from(transparent),color-stop(.5,transparent),color-stop(.5,#d86707),to(#d8...
html中设置边框形状为齿状,css3怎么实现锯齿边框？
weixin_32831131的博客
06-04 850
你这样的最好还是切图做用css3也达不到一毛一样的效果，如果你很想要尝试一下的话可以试试，不过边缘不是顺滑的感觉.jagged {height: 200px;border: 2px solid #ccc;border-bottom: none;position: relative;}.jagged:after {content: '';display: block;height: 10px;bac...
css实现优惠劵的锯齿边框效果
一尾流莺 半世情缘
03-10 1277
下方是实现效果步骤： https://blog.csdn.net/holmofy/article/details/79648343 https://blog.csdn.net/a576736858/article/details/80799485
html锯齿边框,css3制作邮票（锯齿边框）-css3制作邮票（锯齿边框）-HTML5+CSS3-编玩编学- 注重积累的过程 快速锁定问题解决问题 写博客，在积累源码,持续更新技术博客,加分项...
weixin_30308101的博客
06-22 771
css3制作邮票(锯齿边框)html:css:body,h1,h2,h3,h4,ul,li,div,a,p{margin:0;padding:0;font-family:arial;}body{/*background-color:#2F3238;*/background-color:skyblue;}.stamp{width:280px;height:180px;display:...
css3实现锯齿边框（用于优惠券或邮票等）
热门推荐
06-25 1万+
&lt;div class="sawtooth-bor"&gt; &lt;div class="pt10 bor_r_dashed clearfix pr10 pb8 flex-item pl10 bg-cffb937"&gt; &lt;h3 class="fs36"&gt;&amp;yen;50&lt;/h3&gt; &lt;div class="fs
CSS3实现边框锯齿效果
weixin_45438997的博客
05-26 1342
使用场景：优惠券兑换页面。 实现代码： <!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"&gt
【CSS】 画优惠券锯齿边框样式
向着光芒的女孩
02-08 2290
通过css就可以画锯齿的优惠券样式，这样画出来的优惠券背景非常高清。
使用css3属性border-image实现锯齿边框
青云码上的博客
03-28 608
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t...
exp2_3_VHDL实现锯齿波_
09-30
实现锯齿波信号，实现累加锯齿波信号输出，完成锯齿波信号的生产
android 实现锯齿类布局
07-02
Anroid Studio项目，用布局简单实现锯类线条。实现比较简单，主要原理是通过平铺实现
OpenGLES三种抗锯齿实现案例
12-06
介绍Android OpenGL ES中，三种可用的抗锯齿实现方式，这里给出详细的代码实现。 文章介绍，请参考： https://blog.csdn.net/xiaxl/article/details/8873018
QT实现抗锯齿圆形头像
01-20
参考QT Demo(Image Composition),使用QT图片混合技术实现抗锯齿头像小Demo，Windows QtCreator创建运行通过。经过尝试setMask方式始终存在锯齿，最后在这种图片混合方式下尝试成功。build-showroundpic-Desktop_Qt_5...
锯齿边框，类似优惠劵效果的自定义 View.zip
09-24
锯齿边框，类似优惠劵效果的自定义 View.zip,半圆锯齿背景虚线边框组合实现简单优惠券效果，可实现一些简单组合
css-垂直居中的几种写法
xxuxioxx的博客
05-27 323
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 283
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 376
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
了解CSS中的link和@import引入CSS的区别
最新发布
祈澈菇凉
05-28 118
【代码】了解CSS中的link和@import引入CSS的区别。
css实现水平锯齿边框
06-06
要在 CSS 中实现水平锯齿边框，可以使用伪元素 `::before` 和 `::after`。以下是一种实现方式： ```css /* 设置 div 元素样式 */ div { position: relative; padding: 10px; background-color: #f0f0f0; } /* ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值