Elementor Custom Shapes – Dreieck, Kreis, Rechteck

Hier einige Beispiele wie man mit Elementor Custom Shapes machen kann.

Diese könnt ihr auch mit der Funktion „Individuelle Positionierung“ auf Absolut setzen um eure Design aufzufrischen.

Diese Spielerein werden mit dem Element „Abstand“ gemacht.

selector {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 150px 100px;
border-color: transparent transparent #f95335
}

selector {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f95335;
position: relative;
}
selector:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f95335;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

selector {
position: relative;
width: 100px;
height: 90px;
}
selector:before,
selector:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #f95335;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
selector:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

Heart via Nicolas Gallagher

Mehr CSS Shapes findet ihr unter:

The Shapes of CSS

Standardbild
Mario
Hier schreibt Mario Röder, Gründer und Inhaber von Digital-Workshop.at. Ich helfe Unternehmen und Online Shop Betreibern, ihre Webseite zu optimieren und zu pflegen. Somit haben Sie mehr Zeit für Ihr Unternehmen und mehr Erfolg.
Artikel: 222

4 Kommentare

  1. Gemacht mit Unlimited Elements?

  2. benötigt man hierfür elementor pro?

Schreibe einen Kommentar