css制作信封

2026-02-13 02:33:03CSS

使用CSS制作信封效果

通过CSS的伪元素、边框和阴影属性可以模拟一个信封的外观。以下是一个简洁的实现方案：

HTML结构

<div class="envelope">
  <div class="envelope-flap"></div>
</div>

CSS样式

.envelope {
  position: relative;
  width: 200px;
  height: 120px;
  background: #f5d742;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  margin: 50px auto;
}

.envelope-flap {
  position: absolute;
  top: -20px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 20px solid #e8c220;
  transform-origin: top;
}

进阶效果：带阴影的立体信封

增加更多细节使信封更逼真：

.envelope {
  position: relative;
  width: 300px;
  height: 180px;
  background: #f8e58c;
  border: 1px solid #d4b747;
  box-shadow: 
    0 4px 8px rgba(0,0,0,0.1),
    inset 0 -10px 20px rgba(0,0,0,0.05);
  margin: 80px auto;
  transform: perspective(500px) rotateX(10deg);
}

.envelope:before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 30px solid #e8c220;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

添加信纸内容

在信封内加入信纸效果：

<div class="envelope">
  <div class="envelope-flap"></div>
  <div class="letter"></div>
</div>

.letter {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transform: translateY(5px);
  transition: all 0.3s ease;
}

.envelope:hover .letter {
  transform: translateY(-40px);
}

这些方案可以根据需要调整颜色、尺寸和动画效果。使用CSS变换和过渡属性可以创建打开信封的交互效果。

css制作信封