Schräge Kanten

[Waegi]

Hallo,

ich komm mal wieder mit nem kleinen Problem zu euch und zwar bin ich zur Zeit an einer Website, dabei würde ich gerne schräge Kanten wie hier erzeugen:



Ich weiß dass es hierfür den Befehl:
transform: skew(-20);
gibt, jedoch ist es so, wenn ich nun einen Text habe, dem einen Hintergrund gebe und dann den Befehl nutze, wird auch meine Schrift schräg und das will ich ned, sondern nur die rechte Kante.

Ich hoffe mir kann hier jemand helfen.

mfg Waegi

 

[cythux]

AW: Schräge Kanten

ich würde es hiermit machen

http://css-tricks.com/snippets/css/css-triangle/

 

[Waegi]

AW: Schräge Kanten

Danke mal für deine Antwort, jedoch hab ich nun das Problem, der Hintergrund mit der schrägen Kante sollte immer so lang wie der Text sein und das ist das, was jetzt nicht passt, also dass sich der nicht dynamisch dem Text anpasst, gibts dafür ne Lösung?
Und wie schaff ich das, dass der Hintergrund sich auch wenn ich das alles auf nem kleinen Display anzeigen lass an die richtige Position setzt?

Als Beispiel dazu, hier wie es auf dem PC aussieht:


und wie es auf einem kleineren Gerät aussieht:


Mfg Waegi

 

[cythux]

AW: Schräge Kanten

Für die mobile Version, solltest du Mediaqueries nutzen


http://screensiz.es/phone

 

[Waegi]

AW: Schräge Kanten

Media Queries ist mir klar, hab ich auch schon genutzt. Jedoch lässt sich dann die schräge auch so realisieren?
Das mit den Kanten, wie es realisiert wurde, hab ich zum Beispiel hier entdeckt, deshalb hab ich es auch über den transoform-Befehl probiert.

mfg Waegi

 

[cebito]

AW: Schräge Kanten

Geht auch ohne Queries... http://jsfiddle.net/RwsHt/1/

 

[Waegi]

AW: Schräge Kanten

Ah, genau das war es, was ich gesucht habe mit dem Skew, also du setzt dort noch ein span rein, dem du einfach das transform:Skew im Gegenteil wieder gibst, zu dem, was du dem kompletten am Anfang gegeben hast.
Das passt dann soweit, vielen Dank für deine Hilfe, und Sorry für meinen etwas doofen Fragen.

 

[Waegi]

AW: Schräge Kanten

Jetzt melde ich mich doch nochmal und zwar würde ich jetzt gerne so ein <span></span> Tag mit einfügen, jedoch funktioniert das bei dem Slider nicht so richtig, ich kann hinter dem kompletten div-Tag was setzen, aber nicht in den div-Tag hinein, also so funktioniert es:

slider.append($('<div class="nivo-caption"></div><span></span>'));

So jedoch nicht:

slider.append($('<div class="nivo-caption"><span></span></div>'));

Jedoch brauch ich ja span-Tag an dieser Stelle damit das funktioniert.

Ich hoffe mir kann hier nochmal jemand helfen.

Mfg Waegi

 

[cebito]

AW: Schräge Kanten

Ungeprüft, so vielleicht...

$('.nivo-caption').each(function(){
   $(this).html('<span>' + $(this).html() + '</span>');
});

Es gibt auch noch .wrap http://api.jquery.com/wrap/ damit gehts auch.

 

[Waegi]

AW: Schräge Kanten

Danke mal für deine Antwort, hab das mittlerweile selbst gelöst, nach einigen Überlegungen, und zwar wurde mir der Teil, den ich innerhalb des DIVs hatte durch das jQuery-Script überschrieben, also dort der entsprechende Titel reingeschrieben wurde. Dann hab ich doch wo der Titel reingeschrieben wird etwas verändert, für alle die es wissen wollen:

alt:

var processCaption = function(settings){
            var nivoCaption = $('.nivo-caption', slider);
            if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
                var title = vars.currentImage.attr('title');
                if(title.substr(0,1) == '#') title = $(title).html();   

                if(nivoCaption.css('display') == 'block'){
                    setTimeout(function(){
                        nivoCaption.html(title);
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                }
            } else {
                nivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }

neu:

var processCaption = function(settings){
            var nivoCaption = $('.nivo-caption', slider);
            if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
                var title = vars.currentImage.attr('title');
                if(title.substr(0,1) == '#') title = $(title).html();   

                if(nivoCaption.css('display') == 'block'){
                    setTimeout(function(){
                        nivoCaption.html('<p><span>' + title + '</span></p>');
                    }, settings.animSpeed);
                } else {
                    nivoCaption.html(title);
                    nivoCaption.stop().fadeIn(settings.animSpeed);
                }
            } else {
                nivoCaption.stop().fadeOut(settings.animSpeed);
            }
        }