如何在按钮边缘放置图标？

Question

我有一个按钮，应该被选中时在按钮的右上角显示刻度图标。将刻度图标部分放置在按钮上，部分放置在按钮外似乎是一个挑战。我想知道您是否可以帮助我。

Answer 1

您可以使用before元素

制作右上角的圆圈

button {
    width: 100px;
    height: 50px;
    position: relative;
    border-radius: 5px;
    background-color: white;
    border: 1px solid blue;
    transform: translate(3rem, 3rem);
} 

button:before {
    content: attr(data);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: skyblue;
    border: 1px solid blue;
    position: absolute;
    top: -10px;
    right:-10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

<button data="&check;" class="badge-top-right">Button</button>

Answer 2

HTML

<button data="i" class="badge-top-right">Button</button>

CSS

button {
  background-color: white;
  width: 100px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid grey;
  margin-top: 40px;
  margin-left: 40px;
  position: relative;
} 

button:before {
  content: attr(data);
  width: 20px;
  height: 20px;
  line-height: 20px .  ;
  border-radius: 50%;
  background: white;
  border:1px solid grey;
  color: black;
  position: absolute;
  top: -10px;
  left: -10px;
  right:-10px;
  left:auto;
}

您可以在此处查看结果： https://stackblitz.com/edit/angular-pjfn6t