奇葩的优惠券样式

类似上面这样的优惠券图片怎么用css实现啊？
两边有圆角凹陷，还有白色边框，背景色还是带透明度的。。。

实现了一下效果都不行，有更好的解决方案吗？

css css3

阅读 3.9k

4 个回答

得票最新

XboxYan

18.1k73789

发布于
2022-07-05

可以参考这两篇文章，相信对你有所帮助

优惠券绘制技巧 https://segmentfault.com/a/11...

不规则图形边框绘制技巧 https://segmentfault.com/a/11...

牛肉苏打

6491621

发布于
2022-07-05

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <div class="card_wrapper">
      <div class="card"></div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card_wrapper {
  width: 300px;
  height: 140px;
  overflow: hidden;
}

.card {
  width: 300px;
  height: 140px;
  border: 1px solid orange;
  border-radius: 20px;
  position: relative;
  box-sizing: border-box;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  top: 50%;
  background-color: #fff;
  transform: translateY(-50%);
  border: 1px solid orange;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.card::before {
  left: -20px;
}

.card::after {
  right: -20px;
}

效果：

在线链接

查看全部 4 个回答

推荐问题

奇葩的优惠券样式

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

css3如何实现这样的渐变背景?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

请问前端小票打印各位是怎么做的？

奇葩的优惠券样式

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

css3如何实现这样的渐变背景?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

请问前端小票打印各位是怎么做的？

如何实现前端视频流的处理和优化？