如何在按钮的其中一个角上叠加添加图片？

实现方案 #

无需修改现有HTML结构，仅需要更新对应CSS规则即可实现效果：

li#menu-item-2046{
  background-color: black;
  margin-inline-end:7px;
  border-radius: 10px;
  box-shadow: 5px 2px 10px;
  /* 以下为新增角落图片配置 */
  background-image: url("替换为你的装饰图片实际地址");
  background-repeat: no-repeat;
  /* 定位到右上角，可按需调整摆放位置 */
  background-position: top right;
  /* 调整装饰图的显示尺寸 */
  background-size: 20px 20px;
  /* 右侧预留空间避免文字和图片重叠 */
  padding-right: 28px;
}

你原有的HTML代码可以直接复用，不需要做任何改动：

<li id="menu-item-2046" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2046 item-level-0 menu-item-design-default menu-simple-dropdown item-event-hover">
  <a href="https://www.website.com" class="demo-class">
    <span class="nav-link-text">text</span>
  </a>
</li>

可调参数说明 #

• 要切换图片摆放的角落，修改background-position的取值即可，可选值：top left（左上角）、bottom left（左下角）、bottom right（右下角）
• background-size根据你的装饰图实际尺寸调整即可
• 对应方向的内边距（比如图片放在右上角就调整padding-right，放在左上角就调整padding-left）要略大于图片宽度，避免按钮内文字和装饰图重叠

内容的提问来源于stack exchange，提问作者Farman Shekh