css 画书签

可以使用CSS的伪元素来实现画书签的效果。以下是一个简单的例子：

<div class="bookmark"></div>

.bookmark {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #f00 transparent;
  position: relative;
}
.bookmark::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 16px 8px;
  border-color: transparent transparent #fff transparent;
  top: -18px;
  left: -8px;
}

上述代码中，`.bookmark`是一个空的`div`元素，通过CSS设置了它的宽度、高度、边框的样式、宽度和颜色。同时，使用了绝对定位，使得在`.bookmark`内部可以添加其他内容。`.bookmark::after`则是`.bookmark`元素的伪元素，用于画出书签的箭头部分。其中，`content`属性用于设置该伪元素的内容为空，`position`属性设置为`absolute`，使得该伪元素与`.bookmark`元素同级，`border`属性设置为三角形的样式，`top`和`left`属性用于调整位置。

通过这样的方式，就可以使用CSS画出一个简单的书签。