页面宽度自动撑大

做一个App的页面，
为了达到预期的效果，给签到的button的外边距给了-10%，结果页面宽度也变宽了，这个需要怎么改？

代码：
<van-button size="small" round>签 到</van-button>

样式：
.btn{
margin-right: -10%;
margin-top: 5%;
background-color: rgba(135, 53, 243, 0.7);
border: none;
color: #fff;
width: 20%;
padding-left: 0px;
justify-content: flex-end;
}

预期的结果：

实际结果：

回答

这种形状可以直接用代码实现

.btn {
  border-radius: 20px 0 0 20px !important;
}