Transparenz Kopfschmerzen

Mein erster Gedanke ist ein Hintergrund auf dem Inhaltsbereich mit einem gebeugten transparenten Dreieck. Dann einen negativen Rand auf den Inhalt anwenden Setzen Sie dann die Position des Inhalts auf relative und setzen Sie seine top -Eigenschaft auf einen negativen Betrag und setzen Sie den unteren Abstand der Kopfzeile auf den gleichen Betrag.

Ähnliches? Ссылка

Sie können mit der Eigenschaft css3 rotate Ссылка

HTML

CSS

CSS3 Hintergrundversion

Solange Ihre Inhaltsregion immer eine durchgehende Hintergrundfarbe hat, können Sie die folgende Änderung verwenden:

Wenn Sie fixed hinzufügen, stellen Sie sicher, dass das Hintergrundbild, wo immer es auch immer verwendet wird, korrekt ausgerichtet sein sollte. Dann gibt es diese Änderung:

Dann müssen Sie nur Ihre arrow2.png umkehren, so dass der Pfeilbereich selbst transparent ist und der äußere Teil des Pfeils die Hintergrundfarbe Ihres Inhalts enthält.

Offensichtlich funktioniert das nur für Browser, die mehrere Hintergründe unterstützen.

CSS2 Einzelhintergrundversion

Wenn ich darüber nachdenke, da mein Gehirn heute ziemlich langsam ist ... gibt es keinen Grund, mehrere Hintergründe zu verwenden. Sie könnten einfach Ihre Pfeilmarkierung wie folgt haben:

Und dann wenden Sie den 4170671240_a90769d747.jpg festen Hintergrund auf .arrow2 an, aber wenden Sie Ihren tatsächlichen arrow2.png Hintergrund auf .arrow-inner an. Auf diese Weise müssen Sie keine Ausnahmen für ältere Browser machen, da es einfach funktionieren sollte.

arrow2.png muss noch invertiert werden, damit dies funktioniert - so dass der Pfeilbereich transparent ist und die Außenseite nicht

Dies ist ein ziemlich alter Beitrag, aber checken Sie diesen Code-Stift, der das Problem mit zwei Pseudo-Elementen löst. Es ist ein Sass Mixin und Sie können es für jede Kante, Breite und Dreieck Position konfigurieren, die Sie mögen. Ссылка