html - 如何在 div 或与文本内联的按钮内创建半圆

Question

我在与文本内联/居中的按钮内创建半圆时遇到问题，请帮助..

在这种情况下，按钮和看起来像按钮的 div 哪个更好，请参见图片以供引用。

Answer 1

只需使用:after 伪元素即可达到预期效果。

.btn-default {
    border: 1px solid #c7c7c7;
    padding: 12px 35px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
    position: relative;
    background: #fff;
}
.btn-default:after {
    content: "";
    position: absolute;
    width: 10px;
    background: #f00;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    border-top-left-radius: 5px;
    z-index: 99;
    height: 20px;
    border-bottom-left-radius: 5px;
}

<button class="btn-default">Demo</button>