<div id="example1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet mauris eleifend ullamcorper varius. Suspendisse eros sem, molestie pulvinar porta a, varius et elit. Suspendisse condimentum nulla sed blandit cursus.</p>
</div>
<style>
#example1 {
border: 2px solid black;
padding: 10px;
border-radius: 15px;
border-style: dashed;
max-width:1200px;
margin:auto;
position:relative;
overflow:hidden;
}
#example1:before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 30px 70px;
border-color: transparent transparent red transparent;
content:'';
position:absolute;
bottom:0px;
right:0px;
}
</style>
<div id="example1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet mauris eleifend ullamcorper varius. Suspendisse eros sem, molestie pulvinar porta a, varius et elit. Suspendisse condimentum nulla sed blandit cursus.</p>
</div>
Voilà je pense que tu voulais quelque chose comme ca
Lord Morpheus a écrit:
Bonjour,
Montre nous ce que tu as essayé de faire plutôt. Nous ne sommes pas là pour travailler à ta place.
Tybok a écrit:
Raison de plus pour chercher un peu
Sérieusement ? Il vous demande quelque chose de simple à faire pour quelqu'un qui s'y connait un peu et vous répondez ça ?
J'ai fait ca en 1min, c'est plus de la mauvaise fois que autre chose
- Edité par Gh0stFive il y a environ 1 heure
Demander quelque chose de tellement simple me parait assez bizarre pour me dire : "l'auteur n'as pas cherché". Pourquoi donc lui donner la réponse? Ce que Tybok a répondu est juste.
Maintenant si ça t'amuses de pondre des codes même pas optimisé en 1 minutes, libre à toi, mais tu n'aide en rien l'auteur du post.
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Si la réf. MDN explique tout mieux, à quoi bon poster un code (effectivement mal optimisé et non respectueux des standards CSS3) ?
Si l'auteur débute, il est plus qu'important qu'il apprenne à réfléchir seul (sachant qu'à partir de mon post il avait déjà toutes les clefs en main : border-radius, border-style, ::before, position:absolute; Vraiment tout pour y arriver. Et vu son code, il n'a pas essayé.
En agissant comme tu le fais, il y a beaucoup de chance que l'auteur recopie bêtement ton code, voir qu'il le prenne pour quelque chose de correct et adopte des mauvaise pratiques.
Forum d'entraide = partage de connaissances, solutions proposées avec explication.
Chacun se nourrit ici des uns et des autres, et ce quelque soit son niveau, j'en fait partie après 5 ans de pratique j'ai besoins de tous pour découvrir et corriger mes erreurs
Les premières réponses n'étaient peut-être pas très engageantes, mais ce n'était pas pour t'embêter, bien au contraire. Et si, tu as bien fait de dire que tu débutais. Si tu avais dit que tu cherchais juste la solution, tu n'aurais sans doute pas eu de réponse.
Quand à ton niveau : si tu veux progresser, il faut que tu comprennes un code avant de le recopier, c'est la base. Si je te demande d'adapter le code de Gh0stFive pour que le coin rouge soit en haut à droite au lieu d'en bas à droite, sauras-tu le faire ?
Si je te demande d'adapter le code de Gh0stFive pour que le coin rouge soit en haut à droite au lieu d'en bas à droite, sauras-tu le faire ?
Non je n'y arrive pas ni en haut à droite ni en haut à gauche.
De prime abord je pensais qu'il suffisait de changer "border-color: transparent transparent red transparent;" en "border-color: transparent red transparent transparent;" mais non
Ne me donner pas la solution cette fois mais juste un lien pour apprendre pour voir si je comprends.
Le lien vers la documentation MDN qui a été donné plus haut par Gh0stFive est parfait https://developer.mozilla.org/fr/docs/Web/CSS/Reference Tu y cherches les différentes propriétés CSS utilisées, tu regardes comment elles fonctionnent, puis tu testes le code pour adapter
Petit indice : changer le border-color , oui. Mais border-color est associé à border-width, qu'il faut donc modifier en conséquence.
De même, position: absolute; va de paire avec bottom et right; il faut que tu ailles voir exactement ce que fait position: absolute; pour réussir à adapter le code
Tybok > il faut insister un peu, recharger la page - j'ai eu le cas où j'avais juste la présentation de LiveWeave, et puis ça a changé quand j'ai rechargé.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pour la première, regarde mon lien sur "position". Ça te donnera les billes pour placer le bloc.
Ensuite, regarde le lien à propos de "border". Premier point à changer pour visualiser exactement ce qui fait le "coin" : remplace "transparent par une couleur, n'importe laquelle sauf rouge. Ça te permettra de comprendre, je pense (tu peux même t'amuser à mettre 4 couleurs différentes, ce sera peut-être plus parlant encore)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)