在网上看到一道面试题，用css实现下图，觉得比较有趣，所以试着实现了一下
直接放代码，用了比较蠢的办法，如果有大佬知道更好的实现，还请多多指导
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card1 {
width: 150px;
height: 100px;
position: relative;
background-image:
radial-gradient(circle at 40px top, #fff 9px, #eb692d 10px, transparent 11px),
radial-gradient(circle at 40px bottom, #fff 9px, #eb692d 10px, transparent 11px);
background-color: #fcedce;
border-radius: 4px;
}
.card1>.line {
position: absolute;
bottom: 18px;
left: 40px;
width: 1px;
height: 66px;
background-color: #eb692d;
}
.card1>.top-left-border {
position: absolute;
top: 0;
left: 2px;
height: 1px;
width: 28px;
background-color: #eb692d;
}
.card1>.top-right-border {
position: absolute;
top: 0;
left: 50px;
height: 1px;
width: 100px;
background-color: #eb692d;
}
.card1>.bottom-left-border {
position: absolute;
bottom: 0;
left: 2px;
height: 1px;
width: 28px;
background-color: #eb692d;
}
.card1>.bottom-right-border {
position: absolute;
bottom: 0;
left: 50px;
height: 1px;
width: 100px;
background-color: #eb692d;
}
.card1::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -3px;
width: 10px;
height: 100%;
background: radial-gradient(circle at right, #ffffff 8px, #eb692d 10px, transparent 8px);
background-size: 14px 16px;
}
.card1::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle at left, #ffffff 8px, #eb692d 10px, transparent 8px);
background-size: 14px 16px;
}
.card1>span {
position: absolute;
right: 30px;
top: 16px;
font-size: 50px;
color: #eb692d;
}
</style>
</head>
<body>
<div class="card1">
<div class="top-left-border"></div>
<div class="top-right-border"></div>
<div class="bottom-left-border"></div>
<div class="bottom-right-border"></div>
<div class="top-border"></div>
<span>券</span>
<div class="line"></div>
</div>
</body>
</html>效果如下：
半圆和波浪实现起来都不难，但是，不同颜色的上下边框，在下才疏学浅没想到其他好办法，只能通过元素的定位加上边框的效果。radial-gradient径向渐变在实际工作用的并不是很多，对径向渐变感兴趣的同学可以参考如下博客：
如果帮助到您了，可以留下一个赞👍告诉我
