Elementor Custom Shapes – Dreieck, Kreis, Rechteck

Teilen auf:

Facebook
LinkedIn
Email

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

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links.
Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.

4 Kommentare

Schreibe einen Kommentar

Ähnliche Artikel

Elementor Snippets

Hier eine kleine Übersicht über Code Snippets die euch das Arbeiten mit Elementor erleichtern. Zum Einfügen der Codes am besten das Plugin „Code Snippets“ benutzen: