css右上角叉按钮 |html在线过滤css工具

.close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
cursor: pointer;
}
.close-btn:before,
.close-btn:after {
position: absolute;
content: "";
width: 2px;
height: 16px;
background-color: #333;
}
.close-btn:before {
transform: rotate(45deg);
}
.close-btn:after {
transform: rotate(-45deg);
}

以上代码中，大家使用了position属性将按钮定位到页面右上角，使用width和height属性来设置按钮的大小，使用cursor属性来让鼠标变成手指形状，以提示用户可以点击。

接下来，大家使用:before和:after伪元素对按钮进行装饰，其中:before元素使用rotate属性将其以45度旋转，:after元素使用rotate属性将其以-45度旋转。这样，就可以在页面右上角生成一个形似叉的关闭按钮。

总之，CSS右上角叉按钮是一种常见的UI元素，能够为用户提供便捷的关闭操作。大家可以通过调整CSS代码来实现不同形状和样式的关闭按钮，从而满足不同页面的需求。