Je me demandais si l'un d'entre vous savait s'il était possible de faire quelque chose comme ça:
3 Réponses :
Penser à haute voix ici, mais si vous avez si vous avez 2 divs verticaux côtés à côté. Dans la division de gauche, utilisez Eric Meyer's technique slantastic sur le côté droit. Dans la droite, l'utiliser sur le côté gauche.
Merci Dnagirl mais cette option n'est pas très flexible. Je vais essayer d'utiliser JS comme dans l'exemple de Billy Moon.
a fait avec un peu de javascript: http://jsfiddle.net/billymoon/avme8/
mais C'est juste pour la commodité, vous pouvez faire la même chose avec HTML.
ne s'appliquera pas à toutes les circonstances et nécessitera un peu de peaufine, mais peut être faite pour travailler pour des choses que vous connaissez la longueur approximative de - Ou connaître la limite supérieure de.
html: CSS: JS:
Bien sûr, vous devez éliminer les frontières d'argent et d'or pour les DIV - je les ai laissées pour que vous puissiez voir comment cela fonctionne. J'aime cette question - mérite les 5 votants !! Nous avons besoin de plus de lignes diagonales sur le Web!
Merci pour votre réponse rapide. Je pense que votre option est la plus flexible (en utilisant JS), donc je vais l'essayer et vous envoyer un message lorsque vous avez terminé. Merci encore.
J'aimerais voir cette idée fondée sur et développée en solution plus flexible. Il peut être fait avec CSS / HTML uniquement - et donc le script du côté serveur, mais JS est très pratique. Il suffit de déterminer ce qu'il faut faire pour différentes quantités de texte, etc. Je suis intéressé par où vous prenez cela. Tchin Tchin.
Nous avons fini, voici à quoi ça ressemble! merci encore Billy Moon
Il pourrait y avoir une meilleure façon d'utiliser des formes CSS: AlistApart.com/article/css-shapes-101
Voici un exemple de la mise en page souhaitée à l'aide de la propriété Demo strong> (Seuls les navigateurs WebKit modernes) p> Remarque: cette disposition serait beaucoup plus facile à faire en combinant p> 
p> forme-extérieur code> et forme-inside code> ( c'est-à-dire pas de positionnement absolu) mais actuellement aucun navigateur, je connais du support Shape-inside code>. em> p>
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida.Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus.Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus.Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
Dans le Démo Slantastic Eric Meyer Vous pouvez voir qu'il y a du texte dans le incliner...
Vous ne pouvez pas faire ce travail avec une quantité dynamique de texte que si vous utilisez JavaScript. C'est une option pour toi?
En regardant la source de la démo d'Eric, il est assez difficile de reproduire automatiquement un tel effet car le fond est spécialement forgé et le texte est une superposition également spécialement conçue pour s'adapter parfaitement à celle-ci. faire cela de manière dynamique pourrait devenir assez désordonné.
Je vais utiliser JavaScript pour l'avoir plus flexible.