奇葩的优惠券样式

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

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

css css3

阅读 3.9k

4 个回答

Fractal

https://blog.csdn.net/tja8N2m2G46OMtF/article/details/80016826

另外：只要你想，啥都能拼出来
https://segmentfault.com/q/1010000039710611/a-1020000039710684

牛肉苏打

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变成一个直角三角形？

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

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