css3画书签 |css3 自适应样式

.bookmark {
width: 0;
height: 0;
border-top: 30px solid #007bff;
border-right: 20px solid transparent;
border-bottom: 0;
border-left: 0 solid transparent;
position: relative;
}
.bookmark:before {
content: "";
width: 20px;
height: 10px;
background-color: #007bff;
position: absolute;
top: 30px;
right: -10px;
transform: rotate(-45deg);
}

首先，大家需要创建一个父元素，用于容纳书签。大家称这个父元素为“bookmark”。添加如下样式，设置书签的样式。

在这里，大家使用了一个魔法数值（magic number）来制作书签的三角形部分。这个数值20px是用来控制书签的大小的，可以根据具体需要进行调整。

接下来，大家使用:before伪元素来创建书签的尾巴。使用“content”属性添加要显示的文本。

好了，现在大家已经实现了一个基本的CSS3书签！接下来，大家可以进一步改进它，添加更多样式和交互效果。

总结一下，CSS3可以实现非常炫酷的Web效果，包括书签效果。使用border属性可以轻松地制作书签的外观，而:before伪元素则是添加书签尾巴的好方法。