css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角)
css3绘制异形图(弧形缺口,箭头缺口,底部为圆弧,重叠按钮,缺角矩形,折角矩形，div边角)
注意：1rem=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>Document</title><style>.btn{width: 100%;height: 0.98rem;line-height: 0.98rem;text-align: center;background: linear-gradient(90deg, #233ECC 0%, #35F9FF 100%);box-shadow: 0.02rem 0.05rem 0 0 rgba(0,0,0,0.5), inset 0.07rem 0.07rem 0 0 rgba(255,255,255,0.5), inset -0.03rem -0.04rem 0.13rem 0 #FFFFFF;border-radius: 0.16rem;font-size: 0.32rem;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;letter-spacing: 1px;text-shadow: 0 0.02rem 0 #003A9B;-webkit-text-stroke: 0.02rem #224785;text-stroke: 0.02rem #224785;}</style>
</head>
<body><div class="btn">提交</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>Document</title><style>.semi-circle{width: 200px;height: 100px;/*高度为宽度的一半*/line-height: 100px;/*设置的字与高度相等，文字则上下居中*/margin:0 auto;border-radius: 0 100px 0 100px;/*100px为高度*/background: rgba(16, 40, 180, 1);/*背景色*/font-size: 16px;color: #fff;text-align: center;}</style>
</head>
<body><div class="semi-circle">测试测试测试测试测试</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>Document</title><style>.semi-circle{width: 200px;height: 200px;/*高度为宽度的一半*/line-height: 100px;/*设置的字与高度相等，文字则上下居中*/margin:0 auto;border-radius: 0 0 0 200px;/*200px设置在不同的位置则代表不同方向的扇形*/background: rgba(16, 40, 180, 1);/*背景色*/font-size: 16px;color: #fff;text-align: center;}</style>
</head>
<body><div class="semi-circle">测试测试</div>
</body>
</html>效果图：
html：
<div class="mod-wrap-cont">可不写宽高，自动撑开</div>css:
.mod-wrap-cont{width: 200px;height: 240px;margin:0 auto;border-radius: 12px;background: rgba(16, 40, 180, 1);/*背景色*//**box-shadow：h-shadow v-shadow blur color inset（不写为外阴影）的注解*0px为水平左右阴影的位置（h-shadow），*1px为垂直上下阴影的位置（v-shadow）*20px为阴影模糊程度（blur）*rgb(68 235 254 / 50%)为阴影的颜色（color）【68 235 254为色值，50%为颜色的透明度】*inset为内阴影，默认无值便为外阴影**//* box-shadow: 1px 1px 20px rgb(68 235 254 / 30%) inset,2px 2px 20px rgb(68 235 254 / 30%) inset,3px 3px 20px rgb(68 235 254 / 30%) inset, 4px 4px 20px rgb(68 235 254 / 30%) inset;此写法为四边设置不同的值（左上，右上，右下，左下） */box-shadow:0px 1px 20px rgb(68 235 254 / 50%) inset;/*四边为一样的值只写一次，*/font-size: 16px;color: #fff;padding:50px 16px;text-align: center;}效果图：
html:
<div class="com-code"><div class="container-header"></div><div class="com-code-cont"><div class="flex-column-center-center"><img class="code-img" src="" alt="" /></div></div><div class="container-footer"></div></div>css:
/* 100px=1rem,可自行转换 */
.flex-column-center-center {display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.com-code {box-sizing: border-box;/* 一定要在父级设置定位，边角使用position: absolute; */position: relative;
}
.com-code-cont {padding: 0.29rem 0.22rem;
}
.code-img {width: 2.57rem;height: 2.52rem;border-radius: 0.08rem;border: 0.04rem solid #75ff1e;
}
/* 上左（长短通过宽高控制） */
.corner-header::before {content: "";position: absolute;width: 0.68rem;height: 0.45rem;top: 0;left: 0;border-top: 1px solid rgba(117, 255, 30, 1);border-left: 1px solid rgba(117, 255, 30, 1);
}
/* 上右（长短通过宽高控制） */
.corner-header::after {content: "";position: absolute;width: 0.68rem;height: 0.45rem;top: 0;right: 0;border-top: 1px solid rgba(117, 255, 30, 1);border-right: 1px solid rgba(117, 255, 30, 1);
}
/* 下左（长短通过宽高控制） */
.corner-footer::before {content: "";position: absolute;width: 0.68rem;height: 0.45rem;bottom: 0;left: 0;border-bottom: 1px solid rgba(117, 255, 30, 1);border-left: 1px solid rgba(117, 255, 30, 1);
}
/* 下右（长短通过宽高控制） */
.corner-footer::after {content: "";position: absolute;width: 0.68rem;height: 0.45rem;bottom: 0;right: 0;border-bottom: 1px solid rgba(117, 255, 30, 1);border-right: 1px solid rgba(117, 255, 30, 1);
}效果图：
html:
<div class="com-btn-box"><div class="com-blue-btn-box"><div class="com-blue-btn-cont flex-center">登录</div></div><div class="com-white-btn-box"><div class="com-white-btn-cont"></div></div></div>css:
//转换成px在rem基础上乘以10
.com-btn-box{position: relative;
}
.com-blue-btn-box{width: 32rem;height: 4.4rem;display: flex;align-items: center;justify-content: center;padding: 2px;background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right; background-size: 50% 50%;background-repeat: no-repeat;position: absolute;left: 0;top: 0;z-index: 77;}.com-blue-btn-cont {width: 100%;height: 100%;background: linear-gradient(0deg, transparent 0, rgba(0, 52, 255, 1) 0) bottom right,linear-gradient(45deg, transparent 12px, rgba(0, 52, 255, 1) 0) bottom left,linear-gradient(0deg, transparent 0, rgba(0, 52, 255, 1) 0) top left,linear-gradient(-135deg, transparent 12px, rgba(0, 52, 255, 1) 0) top right;background-size: 50% 50%;background-repeat: no-repeat;font-size: 1.6rem;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #F6FAFF;letter-spacing: 1px;}
.com-white-btn-box{width: 32rem;height: 4.4rem;display: flex;align-items: center;justify-content: center;padding: 2px;background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right; background-size: 50% 50%;background-repeat: no-repeat;position: absolute;left: 10px;top: 10px;z-index: 66;}.com-white-btn-cont {width: 100%;height: 100%;background: linear-gradient(0deg, transparent 0, #fff 0) bottom right,linear-gradient(45deg, transparent 12px, #fff 0) bottom left,linear-gradient(0deg, transparent 0, #fff 0) top left,linear-gradient(-135deg, transparent 12px, #fff 0) top right;background-size: 50% 50%;background-repeat: no-repeat;}效果图：
html：
<div class="white-light-purple-border"><div class="light-purple-box"><divclass="light-purple-cont"></div></div><div class="white-box"><div class="white-cont" ><slot name="borderCont"></slot></div></div></div>css:
//转换成px就在原基础上乘以10
.white-light-purple-border {position: relative;
}
.light-purple-box {position: absolute;left: 1.2rem;top: 1.2rem;z-index: 66;padding: 2px; //边框的宽度background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
}
.light-purple-cont {width: 31.5rem;height: 14rem;background: linear-gradient(-45deg, transparent 8px, rgba(201, 221, 255, 1) 0);
}
.white-box {position: absolute;left: 0;top: 0;z-index: 77;padding: 2px; //边框的宽度background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
}
.white-cont {width: 31.5rem;height: 14rem;background: linear-gradient(-45deg, transparent 8px, #fff 0);
}效果图：
div两端有圆弧缺口
html:
<div class="box1 flex-center"><div class="box2"></div></div>
css:
.flex-center {display: flex;align-items: center;justify-content: center;}.box1 {width: 160px;height: 100px;background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px)top left,linear-gradient(0.25turn, #fe8864, #FE5151),radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px)bottom right;background-size: 17px 100px, 116px 100px, 17px 100px;background-repeat: no-repeat;background-position: 10px 0px, 26px 0px, 142px 0px;}.box2 {width: 100%;height: 1px;border-top: 2px dotted white;}第二种方法:
html:
<div class="outer"><div class="inner"></div><div class="centerDottedLinePanel"><div class="flex-center centerDottedLineContent"><div class="centerDottedLine"></div></div></div></div>css:
.outer {width: 100%;height: 40px;background: rgba(11, 106, 255, 1);position: relative;}.inner:before {content: "";position: absolute;top: 0;left: 0;width: 50%;height: 100%;background-image: radial-gradient(circle at 0 50%,transparent 0%,transparent 20px,white 20px,white 100%);}.inner {position: relative;height: inherit;}.inner:after {content: "";position: absolute;top: 0;right: 0;width: 50%;height: 100%;background-image: radial-gradient(circle at 100% 50%,transparent 0%,transparent 20px,white 20px,white 100%);}.centerDottedLinePanel {width: 100%;height: 40px;position: absolute;top: 0;left: 0;}.centerDottedLineContent {width: 100%;height: 40px;}.centerDottedLine {width: 86%;height: 2px;border-top: 2px dashed rgba(132, 136, 141, 0.37);}效果图:
css绘制缺口渐变箭头
html:
<div id="square" class="flex-center">测试</div>css:
#square {width: 200px;height: 40px;position: relative;background: linear-gradient(347deg, #fcb733 15%, #fdd474 100%);}#square:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-left: 20px solid white;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}效果图:
半圆:
代码：
<!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>.semi-circle{width: 200px;height: 100px;/*高度为宽度的一半*/margin:0 auto;border-radius: 0 0 100px 100px;/*100px为高度*/background: rgba(16, 40, 180, 1);/*背景色*/font-size: 16px;color: #fff;text-align: center;}</style>
</head>
<body><div class="semi-circle">半圆测试测试测试测试测试<br/>测试测试测试测试测试</div>
</body>
</html>效果图：
底部为圆弧（第一种方式）:
html:
<div class="topBlueBg"></div>css:
.topBlueBg {position: relative;width: 100%;height: 599px;text-align: center;line-height: 50px;
}
.topBlueBg:after {width: 140%;height: 599px;position: absolute;left: -20%;top: 0;z-index: -1;content: "";border-radius: 0 0 50% 50%;background: linear-gradient(134deg, #116eff 0%, #0064ff 100%);
}效果图:
内容自适应重叠框
<!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>.mod-wrap-cont{width: fit-content;/*宽高根据内容自适应*/margin:0 auto;background: rgba(16, 40, 180, 1);/*背景色*/box-shadow:10px 10px 0px rgb(68 235 254 / 80%);/*四边为一样的值只写一次，*/font-size: 16px;color: #fff;padding:50px 16px;text-align: center;padding:10px;border-radius: 10px;}</style>
</head>
<body><div class="mod-wrap-cont">测试测试测试测试测试<br/>测试测试测试测试测试<br/>测试测试测试测试测试<br/>测试测试测试测试测试</div>
</body>
</html>效果图:
重影按钮:
html:
<div class="title-box">中国宋庆龄基金会</div>
css:
.title-box {width: fit-content;padding: 6px 15px;background: #0B51DB;box-shadow: 0px 4px 0px -1px rgba(255, 255, 255, 0.5);border-radius: 18px;white-space: nowrap;font-size: 18px;font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;font-weight: bold;color: #FFFFFF;text-shadow: 0px 1px 0px rgba(8, 0, 164, 0.5);}效果图:
html:
<div class="bg alien"></div>css:
.bg {width: 240px;height:160px;} // -45deg为右下角，45deg为左下角，-135deg为右上角，135deg为左上角，调整角度即可让缺角显示在对应的位置.alien {background: linear-gradient(-45deg, transparent 10px, #fff 0);}
效果图：
html:
<div class="bg alien1"></div>css:
.bg {width: 200px;height: 160px;} .alien1 {margin-top: 2rem;background: linear-gradient(to left top, transparent 50%, rgba(176, 192, 255, 1) 0) no-repeat100% 100% / 1.4em 1.4em,linear-gradient(-45deg, transparent 1em, rgb(18, 245, 207) 0);}效果图：
html:
<div class="bg alien2"></div>
css:
.bg {width: 200px;height: 160px;} .alien2{margin-top: 3rem;background: radial-gradient(circle at top left, transparent 10px, rgb(18, 245, 207) 0) top left,/* 原理类似*/radial-gradient(circle at top right, transparent 10px, rgb(18, 245, 207) 0) top right,radial-gradient(circle at bottom right, transparent 10px, rgb(18, 245, 207) 0) bottom right,radial-gradient(circle at bottom left, transparent 10px, rgb(18, 245, 207) 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;}效果图：
html：
<div class="alien3"><div class="box-alien3">测试啊</div></div> css：
.alien3 {margin-top: 2rem;width: 100px;height: 60px;padding: 3px; //边框的宽度background: linear-gradient(-45deg, transparent 10px, rgba(176, 192, 255, 1) 0);}.box-alien3 {width: 100%;height: 100%;background: linear-gradient(-45deg, transparent 9px, #fff 0);}效果图：
html:
<div class="com-white-btn-box"><div class="com-white-btn-cont"></div></div>css：
.com-white-btn-box{width: 32rem;height: 4.4rem;display: flex;align-items: center;justify-content: center;padding: 2px;background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right; background-size: 50% 50%;background-repeat: no-repeat;} .com-white-btn-cont {width: 100%;height: 100%;background: linear-gradient(0deg, transparent 0, #fff 0) bottom right,linear-gradient(45deg, transparent 12px, #fff 0) bottom left,linear-gradient(0deg, transparent 0, #fff 0) top left,linear-gradient(-135deg, transparent 12px, #fff 0) top right;background-size: 50% 50%;background-repeat: no-repeat;}效果图：
html：
<div class="com-white-btn-box"><div class="com-white-btn-cont"></div></div>css:
.com-white-btn-box{width: 32rem;height: 4.4rem;display: flex;align-items: center;justify-content: center;padding: 2px;background: linear-gradient(-45deg, transparent 8px, rgba(176, 192, 255, 1) 0) bottom right,linear-gradient(45deg, transparent 8px, rgba(176, 192, 255, 1) 0) bottom left,linear-gradient(135deg, transparent 8px, rgba(176, 192, 255, 1) 0) top left,linear-gradient(-135deg, transparent 8px, rgba(176, 192, 255, 1) 0) top right; background-size: 50% 50%;background-repeat: no-repeat;}.com-white-btn-cont {width: 100%;height: 100%;background: linear-gradient(-45deg, transparent 8px, #fff 0) bottom right,linear-gradient(45deg, transparent 8px, #fff 0) bottom left,linear-gradient(135deg, transparent 8px, #fff 0) top left,linear-gradient(-135deg, transparent 8px, #fff 0) top right;background-size: 50% 50%;background-repeat: no-repeat;}效果图：
html:
//不能用div等块级元素<span class="span-class"><span class="demo1">图文介绍标题图文介绍标题图文介绍标题图文介绍</span></span>css:
.span-class {position: relative;overflow: hidden;z-index: 2;}.span-class::after{content:'';display: inline-block;width: 100%;height: 0.8rem;position: absolute;background: #b7d1ff;top: 60%;left: 0;z-index: -1;}效果图（换行失效）：
html：
//不能用div等块级元素<span class="test">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span>css：
.test {background: linear-gradient(to top, #B7D1FF 70%, transparent 70%);background-origin: 0;background-size: 200% 50%;background-repeat: repeat-x;background-position: 0 100%;transition: background-position 0.5s;background-position: -100% 100%;font-size: 1.6rem;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #313774;line-height: 2.5rem;}效果图：
html：
<div id="app" v-cloak><div class="com-box"><div class="com-box2"><div class="com-box3">最简单的方法在最后，可拖至最后查看若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素display：flex；flex-wrap: wrap;align-content:flex-start；子元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每行展示三个。</div></div></div></div>css:
#app{padding: 20% 10%;font-size: 16px;}.com-box{background: rgba(255, 232, 135, 1);}.com-box2 {background: rgba(113, 54, 10, 1);mask: radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51%no-repeat;-webkit-mask: radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51%no-repeat;padding: 8px;}.com-box3{background: radial-gradient(circle at top left, transparent 10px, rgba(255, 232, 135, 1) 0) top left,/* 原理类似*/radial-gradient(circle at top right, transparent 10px, rgba(255, 232, 135, 1) 0) top right,radial-gradient(circle at bottom right, transparent 10px, rgba(255, 232, 135, 1) 0) bottom right,radial-gradient(circle at bottom left, transparent 10px, rgba(255, 232, 135, 1) 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;padding: 12px;}效果图(纯色背景)：
html:
<div id="app" v-cloak><div class="com-box"><div class="com-box2"><div class="com-box3">最简单的方法在最后，可拖至最后查看若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素display：flex；flex-wrap: wrap;align-content:flex-start；子元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每行展示三个。</div></div></div></div>css:
#app {padding: 20% 10%;font-size: 16px;}.com-box {background: rgba(220, 163, 93, 1);}.com-box2 {background: radial-gradient(circle at top left, transparent 10px, rgba(113, 54, 10, 1) 0) top left,/* 原理类似*/radial-gradient(circle at top right, transparent 10px, rgba(113, 54, 10, 1) 0) top right,radial-gradient(circle at bottom right, transparent 10px, rgba(113, 54, 10, 1) 0) bottom right,radial-gradient(circle at bottom left, transparent 10px, rgba(113, 54, 10, 1) 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;padding: 8px;}.com-box3 {background: linear-gradient(180deg, #F9E1AB 0%, #E9C47A 100%);-webkit-mask:radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51% no-repeat;padding:12px;}效果图（渐变背景）：
更多图形可参考第三方案例（如有侵权，联系删除）：
/
最新文章