Wie macht man diesen geformten Knopf?

Question

Knopf

Wie kann ich diese geformte Taste machen? Ich kann die rechte Seite mit "border-radius" verwenden, aber ich habe keine Ahnung, wie man die linke Seite implementiert.

Answer 1

Sie können dazu den CSS-Pseudo-Selektor :: before verwenden.

Wählen Sie das Element wie dem so ist, und fügen Sie die folgenden Arten:

.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; 
}        

Schließlich ist die Positionierung, ich vertraue, dass Sie herausfinden, wie man es richtig zu positionieren. Lass mich wissen, ob das funktioniert. Es ist im Grunde ein Kreis mit nur der rechten Grenze, die über dem Knopfelement sitzt.

Answer 2

Eine reine CSS-Lösung besteht auf dem normalen Hintergrundbild ein kreisförmiges "gradient" Hintergrundbild des Zugebens: 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