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.

Elementor Custom Shapes - Dreieck, Kreis, Rechteck 1
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 2
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 3
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 1
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 2
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 6
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 3
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 1
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 9
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 10
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 11
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 1
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 9
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 10
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 15
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 16
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 17

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

Elementor Custom Shapes - Dreieck, Kreis, Rechteck 16
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 19
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;
}
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 16
Elementor Custom Shapes - Dreieck, Kreis, Rechteck 21

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

Beiträge nach Top Kategorie Filtern:

Abonnieren
Benachrichtige mich bei
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Gemacht mit Unlimited Elements?

benötigt man hierfür elementor pro?

Datenschutz
Digital-Workshop, Besitzer: Mario Röder (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.
Datenschutz
Digital-Workshop, Besitzer: Mario Röder (Firmensitz: Österreich), verarbeitet zum Betrieb dieser Website personenbezogene Daten nur im technisch unbedingt notwendigen Umfang. Alle Details dazu in der Datenschutzerklärung.