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.

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>

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

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.

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.