Interro surprise pour les rois du CSS : Alignement en diagonale

[indigene]

Bonjour,

Je souhaite réaliser un alignement en diagonale de mon texte par rapport à une image triangulaire que j'ai mis en background.

Voici une représentation visuelle :

(l'image a été prise sur un forum. quelqu'un cherchait à faire la même chose que moi et n'a pas eut de réponses concluantes)

J'arrive bien à le faire en utilisant plein de div avec des width en pourcentage et en faisant varier le pourcentage au fur et à mesure. En gros je met une ligne de texte par div.

Le problème c'est si l'utilisateur prend envie de grossir la police à l'écran. :?

Le gros problème c'est avec le responsive où c'est complètement pété quand on rétrécit la largeur de l'écran.

Quelqu'un saurait-il faire ? Avec des rotates peut-être ? Avec un plug-in wordpress ? Du jquery ?

 

[spout]

C'est cette technique que tu as testé ?
http://codepen.io/web-tiki/pen/ByWowO
http://meyerweb.com/eric/css/edge/slantastic/demo.html
http://jsfiddle.net/billymoon/AvmE8/
[...]

 

[indigene]

Non, pas du tout.
Je fais l'alignement sur une image qui, elle, est carrée, mais qui présente une moitié en diagonale de la couleur du fond. Donc elle donne l'apparence d'être un triangle.
Voici comment j'ai placé l'image dans le html :

<div id="aw9vBAKz3" class="span12 tw-para "><h2>Titre</h2>
<div class="imagefond1">
....
<div class="ptext">

Et voici comment elle est déclarée dans le css :

@-ms-viewport{width:device-width;}.hidden{display:none;visibility:hidden;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}
.hidden-desktop{display:none !important;}
.visible-desktop{display:inherit !important;}
.imagefond1{background:hsl(0,0%,0%) url(../../../_media/img/large/Sans_titre-16.jpg) no-repeat scroll left top;background-size:50%;}
@media (min-width:768px) and (max-width:979px){
.hidden-desktop{display:inherit !important;} 
.visible-desktop{display:none !important ;} 
.visible-tablet{display:inherit !important;} 
.hidden-tablet{display:none !important;}
.imagefond1{background:hsl(0,0%,0%)}
}
@media (max-width:767px){
.hidden-desktop{display:inherit !important;} 
.visible-desktop{display:none !important ;} 
.visible-tablet{display:inherit !important;} 
.hidden-tablet{display:none !important;}
.imagefond1{background:hsl(0,0%,0%)}
}

Tu noteras qu'au passage j'ai résolu le problème du responsive assez radicalement car j'ai simplement supprimé l'image si la largeur devient inférieure à 980.

Pour ce qui est du traitement du décalage, voici le code html :

<div class="imagefond1">
<div class="ptext">
<div class="large50"><p>bla bla bla </p></div>
<div class="large55"><p>bla bla bla</p></div>
</div><div style="clear:both">
<div class="large35">&nbsp;</div><h3 class="large65">Titre H3</h3></div>
<div class="ptext">
<div class="large70"><p>bla bla bla</p></div>
<div class="large80"><p>bla bla bla</p></div>
<div class="large86"><p>bla bla bla</p></div>
<div class="large92"><p>bla bla bla</p></div>
</div>

Et dans le css j'ai mis ceci :

@-ms-viewport{width:device-width;}.hidden{display:none;visibility:hidden;}
.visible-phone{display:none !important;}
.visible-tablet{display:none !important;}
.hidden-desktop{display:none !important;}
.visible-desktop{display:inherit !important;}
.imagefond1{background:hsl(0,0%,0%) url(../../../_media/img/large/Sans_titre-16.jpg) no-repeat scroll left top;background-size:50%;}
[b].large50{width:50% !important;float:right !important;}
.large55{width:55% !important;float:right !important;}
.large35{width:35% !important;float:left !important;}
.large65{width:65% !important;float:left !important;}
.large70{width:70% !important;float:right !important;}
.large80{width:80% !important;float:right !important;}
.large86{width:86% !important;float:right !important;}
.large92{width:92% !important;float:right !important;}
[/b]@media (min-width:768px) and (max-width:979px){
.hidden-desktop{display:inherit !important;} 
.visible-desktop{display:none !important ;} 
.visible-tablet{display:inherit !important;} 
.hidden-tablet{display:none !important;}
.imagefond1{background:hsl(0,0%,0%)}
.large50{width:100% !important; float:right !important;}
.large55{width:100% !important; float:right !important;}
.large35{width:100% !important; float:left !important;}
.large65{width:100% !important; float:left !important;}
.large70{width:100% !important; float:right !important;}
.large80{width:100% !important; float:right !important;}
.large86{width:100% !important; float:right !important;}
.large92{width:100% !important; float:right !important;}}
@media (max-width:767px){
.hidden-desktop{display:inherit !important;} 
.visible-desktop{display:none !important;} 
.visible-phone{display:inherit !important;} 
.hidden-phone{display:none !important;}
.imagefond1{background:hsl(0,0%,0%)}
.large50{width:100% !important; float:right !important;}
.large55{width:100% !important; float:right !important;}
.large35{width:100% !important; float:left !important;}
.large65{width:100% !important; float:left !important;}
.large70{width:100% !important; float:right !important;}
.large80{width:100% !important; float:right !important;}
.large86{width:100% !important; float:right !important;}
.large92{width:100% !important; float:right !important;}}

Tu noteras qu'au passage j'ai résolu le problème du responsive assez radicalement car j'ai simplement supprimé le pourcentage pour le forcer à 100% si la largeur devient inférieure à 980.
En responsive il n'y a pas d'image donc pas de décalage en diagonale à effectuer :mrgreen: