Wie erstelle ich per CSS eine Box mit abgewinkelten und abgerundeten Ecken auf einer Seite?
P粉068174996
P粉068174996 2023-08-25 19:46:29
0
1
527
<p>Ich habe derzeit das Bedürfnis, so etwas zu machen. </p> <p>Mein erster Gedanke war, Clip-Path 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. </p> <p>Am Ende habe ich jede Schaltfläche als zwei <em>Divs</em> erstellt, wobei ein Div um 22,5 Grad geneigt war und das reguläre rechteckige Div überlappte. Dann habe ich beiden einen Randradius hinzugefügt.</p> <p><br /></p> <pre class="brush:css;toolbar:false;">body { Zeilenhöhe: 0; Schriftgröße: 16px; Hintergrundfarbe: schwarz; } .cta-button-group { Anzeige: Flex; Lücke: 2rem; align-items: center; } .button-angular-wrapper-left { Anzeige: Flex; Isolation: isolieren; Position: relativ; Höhe: 40px; Breite: fit-content; } .button-angular-wrapper-left .button-angular-main { Randradius: 7px 0 0 7px; Höhe: 100 %; Anzeige: Inline-Grid; Ortselemente: Mitte; padding-inline: 8px 16px; Rand rechts: 13px; Übergang: Hintergrundfarbe 50 ms; } .button-angular-wrapper-left .button-angular-slant { Randradius: 0 7px 7px 0; Höhe: 100 %; Breite: 24px; Position: absolut; rechts: 0; oben: 0; unten: 0; Z-Index: -1; Übergang: Hintergrundfarbe 50 ms; } .button-angular-wrapper-left .button-angular-slant.back-slash { transformieren: skewX(22,5deg); } .button-angular-wrapper-left .button-angular-slant.forward-slash { transform: skewX(-22,5deg); } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main, .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant { Hintergrund: weiß; Rand: 3 Pixel einfarbig weiß; Farbe blau; } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main { border-right: keine; } .button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant { border-left: keine; } .button-angular-wrapper-right { Anzeige: Flex; Isolation: isolieren; Position: relativ; Höhe: 40px; Breite: fit-content; } .button-angular-wrapper-right .button-angular-main { Randradius: 0 7px 7px 0; Höhe: 100 %; Anzeige: Inline-Grid; Ortselemente: Mitte; padding-inline: 8px 16px; Rand links: 13px; } .button-angular-wrapper-right .button-angular-slant { Randradius: 7px 0 0 7px; Höhe: 100 %; Breite: 24px; Position: absolut; links: 0; oben: 0; unten: 0; Z-Index: -1; } .button-angular-wrapper-right .button-angular-slant.back-slash { transformieren: skewX(22,5deg); } .button-angular-wrapper-right .button-angular-slant.forward-slash { transform: skewX(-22,5deg); } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main, .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant { Rand: 3 Pixel einfarbig weiß; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main { border-left: keine; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call { Farbe weiß; } .button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text { Farbe weiß; }.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant { border-right: keine; }</pre> <pre class="brush:html;toolbar:false;"><div class="cta-button-group"> <div class="button-angular-wrapper-left button-angular-color-solid-white" href=""> <div class="button-angular-main"> <span class="cta-text"> Erfahren Sie noch heute mehr </span> </div> <div class="button-angular-slant Back-slash"> </div> </div> <div class="button-angular-wrapper-right button-angular-color-outline-white" href=""> <div class="button-angular-main"> <span class="cta-text tel-link-no"> 1800-1-5555 </span> </div> <div class="button-angular-slant Back-slash"> </div> </div> </div></pre> <p><br /></p> <p>CodePen:https://codepen.io/katylar/pen/yLRjKaO</p>
P粉068174996
P粉068174996

Antworte allen(1)
P粉928591383

我已经用伪元素尝试过这种方法。该形状的左侧是一个 ::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;
}
<div class="button button-left">
  <span class="button-content">Slanted Button</span>
</div>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage