Erstellen einer Pyramidenform nur mit CSS / HTML

8

Ich versuche eine pyramidenähnliche Form in CSS zu erstellen. Ich mache es mit einer Methode, über die ich im Internet gelesen habe, dass wenn man die Breite eines Div auf 0 px setzt, seine Ränder sich zu 4 Dreiecken verbinden. Aber ich möchte die spitze Spitze von entfernen / schneiden die Pyramide und ich waren dazu nicht in der Lage. Ich habe versucht, Tipp mit anderen DIV zu verstecken, aber das sieht nicht richtig aus.

Vorhandene Form: Unten ist was ich bisher gemacht habe.

Erforderliche Form: Was ich machen möchte, ist eine solche Form:

Hier ist mein Code:

%Vor% %Vor%
    
Naeem Ul Wahhab 29.08.2016, 09:20
quelle

3 Antworten

12

Wenn du deinem div eine beliebige Breite hinzufügst, ist das der Trick. Sie haben tatsächlich 3 zusammenhängende Figuren: 2 Dreiecke und 1 Rechteck dazwischen.

%Vor% %Vor%
    
aBabiracka 29.08.2016, 09:25
quelle
2

Sie können perspective() und rotateX() verwenden, um eine solche Form zu erstellen

%Vor% %Vor%
    
Nenad Vracar 29.08.2016 09:29
quelle
2

Ich habe ein kleines weißes Dreieck am oberen Rand eines großen blauen Dreiecks platziert

%Vor% %Vor%

Hier ist der Link zu css traingle von CSS-Trick.com

Sonst können Sie einfach mit dieser Online-APP

generieren     
vishnu 29.08.2016 09:38
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wird F # jemals eine Mainstream-Sprache wie C # sein? Oder wird es eine Nischensprache bleiben? [geschlossen]