Bonjour, 

Je souhaite mettre du texte dans un losange sans que celui dépasse les bords de ce losange, sans succès. si quelqu'un a une solution,.. bien a vous. voici mon code css de ce losange ainsi que le résultat:

#diamond2 {
    height: 300px;
    width: 300px;
	background:white;
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari et Chrome */
    -o-transform: rotate(45deg); /* Opera */
	border: solid 1px grey;
	border-radius: 7px 7px 7px 7px;
	box-shadow: 1px 1px 1px grey;
	position:absolute;
	top:100px;
	left:580px;
	z-index:3;
}

#diamond2 p{
    -ms-transform: rotate(315deg); /* Internet Explorer */
    -moz-transform: rotate(315deg); /* Firefox */
    -webkit-transform: rotate(315deg); /* Safari et Chrome */
    -o-transform: rotate(315deg); /* Opera */
}

Bonjour,

Le genre d'envie faussement simple..

Tu peux tenter d'utiliser shape-outside (voir: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Shapes/Formes_simples)

Un petit essai bricolé ici:

 http://jsbin.com/kuguwovule/1/edit?html,css,output

inspiré d'un exemple que j'ai simplifié et adapté à la forme voulue grâce à cet outil: clippy.

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be
    funneling your attention towards a spot on the page
    to drive you to follow a particular link.  Sometimes
    you don't notice.
  </p>
</div>

CSS

.left,.right {
  width: 30%;
  height: 6rem;
  background-color: gray;
}

.left {
  shape-outside: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%);
  float: left;
  clip-path: polygon(0 0, 100% 0, 0 50%, 100% 100%, 0 100%);
}

.right {
  shape-outside: polygon(100% 0, 0 0, 100% 50%, 0 100%, 100% 100%);
  float: right;
  clip-path: polygon(100% 0, 0 0, 100% 50%, 0 100%, 100% 100%);
}

p {
  text-align: center;
}

Bonjour MalvynNouvel,

Une autre solution:

https://codepen.io/Zonecss/pen/qKmyLq

Merci a vous deux pour vos réponses. Je n'es fait ni l'un ni l'autre mais plutôt un genre de mix des deux, En effet en utilisant la solution de philiga, je perdais énormément de place dans mon losange pour le texte ( après peut être que je m'y prend mal), j'ai donc crée un deuxième carré par dessus le losange en transparence qui utilise la solution de philiga. Je n'aime pas trop le fait de devoir créer deux formes pour un rendu mais ça tient la route. néanmoins  si quelqu'un a mieux je suis preneur ! Merci a vous. cela donne ca si je rend visible le carré du dessus

-
Edité par MalvynNouvel 14 juin 2018 à 8:27:55

Je pense que c'est une bonne idée ; tu peux ainsi maximiser l'utilisation de l'espace pour le texte.

Tu ne précisais pas si tu voulais que le texte épouse la forme du losange ; c'est ce que j'avais cru comprendre.

@AliasDmc: Tes propositions sont impressionnantes de technicité, mais ne permettent pas ce suivi du contour en losange ; du coup, chapeau, mais quel est l'intérêt de tout ce déploiement d'habileté et de JS pour simplement insérer une div basculée à 45° dans une autre?

-
Edité par philiga 14 juin 2018 à 12:27:10

Hello,

Sinon tu peux essayer un trick comme ça : https://jsfiddle.net/saL7r8x6/3/ sans JS ni shape-outside (attention à la compatibilité d'ailleurs).

Oui, MrChampy, c'est le truc basique, mais qui ne permet pas que le texte épouse le contour du losange.

Mais au moins, pour le même résultat, c'est plus simple que les codes puissants, mais dont je ne saisis pas l'utilité, d'AliasDmc.

PS: Et tu as raison de souligner le problème de compatibilité, je vois qu'Edge ne semble pas connaître: 

https://caniuse.com/#search=shape-outside

-
Edité par philiga 14 juin 2018 à 12:35:23

exact, je cherche une solution pour épouser les contours du losange

-
Edité par MalvynNouvel 14 juin 2018 à 16:57:59

Actuellement, pour un site un minimum sérieux, tu ne peux pas faire l'impasse sur IE/Edge, il va donc falloir attendre pour ma solution avec shape que Microsoft s'y convertisse...

J'avais tenté ceci:

http://jsbin.com/nevipekuqi/1/edit?html,css,js,output

il y a qq temps déjà ; c'était à l'occasion de cet échange sur une div inclinée par skew:

https://openclassrooms.com/forum/sujet/aligne-du-texte-sur-une-div-parallelepipedique

Je ne sais pas si tu peux en tirer une solution... 

-
Edité par philiga 14 juin 2018 à 17:17:55

Bonjour philiga,

philiga a écrit:

Oui, MrChampy, c'est le truc basique, mais qui ne permet pas que le texte épouse le contour du losange.

Mais au moins, pour le même résultat, c'est plus simple que les codes puissants, mais dont je ne saisis pas l'utilité, d'AliasDmc.

Je vais pinailler, mais c'est pas exactement le même résultat, dans mon code les coins du conteneur de texte touche le cadre du losange et c'est à cause de cette contrainte qu'il faut faire un peu de calcul.
Mais si cela convient à MalvynNouvel (a bas non c'est pas ce qui cherchait). Ca me va

Quand au js c'est juste du bonus au cas ou il voudrait du responsive

-
Edité par AliasDmc 14 juin 2018 à 17:19:23