如何制作这个形状的按钮？

Question

按钮

如何制作这个形状按钮？我可以使用右边的“border-radius”，但我不知道如何实现左侧。

Answer 1

您可以使用CSS伪选择器::之前完成此操作。

选择这样的元素，并添加以下样式：

.button::before {
    content: "";
    width: //whatever you choose to fit
    height: //whatever you choose to fit
    background-color: #fff !important;
    //this will hide the border of the element itself
    border-radius: //same radius as the element
    z-index: 9999; //hides the button border
    border-right: //same width as the element, solid black
    border-left: 0px; //so it doesnt show
    border-bottom: 0px;
    border-top: 0px;
}                            

最后是定位，我相信你会弄清楚如何正确定位它。让我知道这个是否奏效。它基本上是一个只显示右边框的圆圈，坐在按钮元素上。

Answer 2

纯CSS解决方案包括在正常背景图像上添加圆形“渐变”背景图像：HTML

    .round {
        background:
            radial-gradient(circle at 0 50%, rgba(204,0,0,0) 30px, #c00 15px);
            border-top-right-radius:3em;
            border-bottom-right-radius:3em;
    }

    <div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>

Fiddle