单个div+css布局实现礼盒效果代码-html代码-BFW代码库

单个div+css布局实现礼盒效果代码

代码语言：html

代码描述：单个div+css布局实现礼盒效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
  
<style>
@charset "UTF-8";
html {
  background-color: #f7ebd9;
}

div {
  --red: #e22d2a;
  --green: #44bd32;
  --top-h: 17cqw;
  aspect-ratio: 1/0.9;
  translate: 0 15cqw;
  border-radius: 4cqw;
  background-image: linear-gradient(to bottom, transparent var(--top-h), rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) calc(var(--top-h) + var(--top-h) / 3), transparent 0), linear-gradient(to right, transparent calc(50% - var(--top-h) / 2), var(--green) 0, var(--green) calc(50% + var(--top-h) / 2), transparent 0), linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--green), black 20%) 0, var(--green) calc(50% + var(--top-h)), transparent 0);
  background-color: var(--red);
  scale: 0.85;
  translate: 0 12%;
}
div::before {
  left: -5cqw;
  right: -5cqw;
  height: var(--top-h);
.........完整代码请登录后点击上方下载按钮下载查看