Wie erstelle ich per CSS eine Box mit abgewinkelten und abgerundeten Ecken auf einer Seite?

Question

Ich habe derzeit das Bedürfnis, so etwas zu machen. Mein erster Gedanke war, den Clip-Pfad zu verwenden, aber die abgerundeten Ecken lassen sich nur schwer umsetzen, und es ist schwierig, 22,5 Grad beizubehalten, wenn die Breite der Schaltfläche aufgrund ihres Inhalts geändert wird. Am Ende habe ich jede Schaltfläche als zwei Divs erstellt, wobei ein Div um 22,5 Grad geneigt war und ein normales rechteckiges Div überlappte. Dann habe ich beiden einen Randradius hinzugefügt. body{line-height:0;font-size:16px;background-color:black;}.cta-button

P粉928591383 · Answer

我已经用伪元素尝试过这种方法。该形状的左侧是一个 ::before 元素，为了实现悬停效果，我将按钮和伪元素上的特定边设为不可见，并更改了特定角的边框半径。

.button {
  color: white;
  background-color: black;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 11px;
  display: inline-block;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 2px solid black;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-left::before {
  content: " ";
  display: block;
  position: absolute;
  top: -2px;
  left: -12px;
  z-index: -10;
  background-color: black;
  width: 20px;
  height: 100%;
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  border-radius: 4px;
  border: 2px solid black;
}

.button-left:hover {
  background: rgba(0,0,0,0);
  box-sizing: border-box;
  border: 2px solid black;
  border-left: 2px solid rgba(0,0,0,0);
  color: black;
  border-top-left-radius: 0;
}

.button-left:hover::before {
  border-right: 2px solid rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
}


  Slanted Button