css 制作书签

使用 CSS 制作书签效果

通过 CSS 可以创建视觉上的书签效果，通常用于标记网页中的重点内容或导航。以下是几种实现方法：

基础书签样式

.bookmark {
  position: relative;
  display: inline-block;
  padding: 8px 15px;
  background-color: #f5f5f5;
  border-radius: 0 5px 5px 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.bookmark::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  border-width: 15px 15px 15px 0;
  border-style: solid;
  border-color: transparent #f5f5f5 transparent transparent;
}

彩色书签变体

.color-bookmark {
  background-color: #4CAF50;
  color: white;
}

.color-bookmark::before {
  border-color: transparent #4CAF50 transparent transparent;
}

带折角效果

.folded-corner {
  position: relative;
  background: #ffeb3b;
  padding: 15px;
}

.folded-corner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #fff #ffc107;
}

悬停动画效果

.animated-bookmark {
  transition: all 0.3s ease;
  transform-origin: left center;
}

.animated-bookmark:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

HTML 结构示例

<div class="bookmark">重要笔记</div>
<div class="color-bookmark">待办事项</div>
<div class="folded-corner">参考内容</div>

这些 CSS 样式可以单独使用或组合使用，通过调整颜色、尺寸和阴影参数可以创建不同风格的书签效果。对于更复杂的实现，可以考虑结合 SVG 或使用 CSS 渐变来增强视觉效果。