CSS – Schneide mal die Ecke ab

Manchmal muss man ganz schön zaubern, um die „Photoshop-Designs“ mit CSS nachzubauen. Heute schneiden wir Ecken ab.

Ja ja, die Designer. Haben manchmal schon tolle Ideen für Webdesigns. Geht auch alles ganz leicht in Photoshop. Bei der Umsetzung mit CSS geht dann die Zauberei los. Abrundungen genügen nicht? Die Ecke soll ab? Also gut.


Einfacher Div

Um von einem einfachen Div ohne Border eine Ecke abzuschneiden, können wir einen Gradienten verwenden. Damit könnte man z.B. folgenden Menübutton stylen.

My Button

Mit folgendem CSS kann man alle 4 Ecken abschneiden.

linear-gradient(135deg, transparent 10px, #65C7F20) top left,
linear-gradient(225deg, transparent 10px, #65C7F20) top right,
linear-gradient(315deg, transparent 10px, #65C7F20) bottom right,
linear-gradient(45deg,  transparent 10px, #65C7F20) bottom left;

Und hier der Code unseres Beispiel-Buttons.

.mybutton {
  width: 150px; 
  height: 50px; 
  background-color: #65C7F2; 
  background: linear-gradient(225deg, transparent 10px, #65C7F2 0) top right;
  text-align: center;
  padding-top: 15px;
  color: #fff;
}


<div class="mybutton">My Button</div>


Div mit Border

Die Variante mit dem Gradienten funktioniert nicht bei einem Div mit Border. Hier ein Beispiel eines Panels mit Header.

Header
Content Box

Hier benötigen wir einen anderen Trick. Man kann in diesem Fall ein kleines Div über die Ecke legen und so lang Größe und Rotation anpassen, bis es über die Ecke passt.

Content Box

Der Code für dieses Beispiel sieht dann so aus.

.mpanel {
  width: 250px; 
  border: 1px solid #3DB9EE;
}
.mheader {
  height: 50px; 
  background-color: #65C7F2;
  border-radius: 0;
  position: relative;
  color: #fff;
  padding: 15px 5px;
}
.mheader::before {
  border-bottom: 1px solid #3DB9EE;
  background-color: #fff;
  transform: rotate(45deg);
  width: 26px;
  height: 15px;
  position: absolute;
  top: -4px;
  right: -9px;
  content: "";
}
.mcontent {
  height: 150px;
  padding: 15px 5px;
}


<div class="mpanel">

<div class="mheader" style="">Header</div>


<div class="mcontent">Content Box</div>

</div>

Das war es auch schon. Wir hoffen wie immer, diese erstbeste Lösung ist hilfreich.

Ähnliche Beiträge

2 Kommentare

  1. Hey, an sich ist die Lösung ja schon ganz gut, allerdings habe ich noch ein Problem. Die Ecke müsste in meinem Fall (Slider) wirklich transparent sein. Gibt es hierzu auch einen Lösungsweg?

    Grüße Tobi.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert