TV-Shaped CSS Abbildung, die das Bild abgrenzt
Ich kann mir nicht vorstellen, wie ich das Folgende erreichen soll.
Ich habe diese Form:
Dies ist das gewünschte Ergebnis:
Wenn ich jedoch den Überlauf auf das untergeordnete div anwendete, geschah dies:
Oder wenn der Überlauf im übergeordneten div
ist 
Ich habe versucht, das CSS in mehr divs zu teilen und dann zu versuchen, sie zu überlappen, und all diese Versuche waren Fehler.
HTML und CSS sind die folgenden
CSS:
%Vor%HTML (Nichts Besonderes) :
%Vor%Und Hier ist das JSFiddle und das CSS und HTML.
Wie konnte ich das erreichen?
Beratung wird sehr geschätzt.
BEARBEITEN : Ich wollte, dass das Bild ein eigenes Element ist, background:url() , es ist nicht das, wonach ich suche.
EDIT # 2 : Dies war eine der gegebenen Lösungen, die Figuren sind nicht die gleichen, die abgerundeten linken und rechten Seiten verschwinden.
Danke.
2 Antworten
Ich könnte zwei Optionen vorschlagen, obwohl man das image -Element weglassen muss und das zweite jQuery benutzt ... (Ich glaube wirklich nicht, dass es mit dem image -Element möglich ist). ..Es tut uns leid.)
Option 1)
Da die Bild-URL im HTML-Code sein muss, passen Sie den Code wie folgt an:
%Vor%Fügen Sie dann das folgende CSS hinzu:
%Vor% Hier ist eine Geige: Ссылка
Option 2)
Grundsätzlich das Gleiche wie Option 1, außer dass ich "betrogen" habe, indem ich den HTML-Code so belassen habe, wie er war, d. h.
%Vor%Fügen Sie jQuery hinzu, damit der HTML-Code wie Option 1 aussieht:
%Vor% Verstecken Sie dann das image -Tag mit CSS:
Hier ist eine andere Geige: Ссылка
Ich habe diesen Code einfach in Ihr CSS eingefügt
%Vor%Das verwendete Bild wird nur zufällig zum Beispiel genommen. Ist diese gewünschte Version gewünscht?
JSFiddle: Link
Tags und Links html css css3 css-shapes