主机参考_WordPress技巧分享_博客“NEW”、“置顶”图标样式调整为按指定角度倾斜

在更新插件的前端视觉效果时，我选择了一个更为时尚和动态的设计，将”NEW”和”置顶”的标签以倾斜的方式呈现。以下是修改后的CSS代码：

“`CSS
/** 优化摘要列表布局 */
.excerpt {
position: relative;
overflow: visible; /* 添加此行以确保图标不被剪裁 */
}

/** 创新的’NEW’标签样式 */
.excerpt .new-label {
position: absolute;
right: -30px;
bottom: 10px; /* 修改位置以达到更好的视觉效果 */
width: 80px; /* 调整尺寸以适应新设计 */
height: 20px;
background-color: #4CAF50;
color: #fff;
font-size: 14px;
font-weight: bold;
text-transform: uppercase; /* 更改为全大写增加辨识度 */
text-align: center;
padding-top: 2px; /* 增加内边距使文字居中 */
transform: skewX(-15deg); /* 改为斜切效果，增加动感 */
transform-origin: bottom right;
z-index: 1; /* 添加z-index以确保图标始终在前 */
}

/** 独特的’置顶’标签样式 */
.sticky-label {
position: absolute;
right: -30px;
bottom: 10px;
width: 80px;
height: 20px;
background-color: #FF5E52;
color: #fff;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-top: 2px;
transform: skewX(-15deg);
transform-origin: bottom right;
z-index: 1;
}

/* 响应式设计，屏幕宽度小于640px */
@media (max-width: 640px) {
.excerpt-sticky header {
text-indent: 0;
position: static;
}

.sticky-label {
right: auto;
left: -30px; /* 更改为左侧显示 */
}
}
“`

这个新版本的代码不仅改变了图标样式，还优化了其位置和大小，使其在不同屏幕尺寸下有更好的显示效果。同时，使用了skewX()函数来实现倾斜效果，使整体设计更加现代化。