纯css实现卡片丝带边框效果-html代码-BFW代码库

纯css实现卡片丝带边框效果

代码语言：html

代码描述：纯css实现卡片丝带边框效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
    background: white;
    padding: 150px;
}
.box {
  margin: 50px;
  width: 220px;
  height: 220px;
  background: #7b2929;
  position: relative;
}
.sale {
  position: absolute;
  left: -40px;
  top: 21px;
  width: 150px;

  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.box *:before,
.box *:after {
  content: "";
  position: absolute;
}

.sale:after,
.sale:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

  width: 8px;
  height: 21px;
  background: #999;
  left: 5px;
  top: 14px;
}
.sale:after {
  width: 17px;
  height: 7px;
  right: 0px;
  top: 23px;
  left: auto;
}
.........完整代码请登录后点击上方下载按钮下载查看