Partage

Coin arrondi + marquer en bas a droite

xv

10 janvier 2018 à 17:04:37

Bonjour

Est ce possible de faire quelque chose comme ça en css ?

Faire un border-dotted + border-radius + un petit marqueur en bas a droite ?

Si oui comment

Merci

10 janvier 2018 à 17:12:45

Salut !
C'est possible, regarde du côté des pseudo-éléments (::before et ::after), que tu peux positionner en absolute ;)

10 janvier 2018 à 17:14:38

Merci pour cette réponse rapide mais si tu avais un exemple ou mieux un bout de code. Je débute.
10 janvier 2018 à 17:18:06

Raison de plus pour chercher un peu ^^
10 janvier 2018 à 17:19:44

Bonjour,

Montre nous ce que tu as essayé de faire plutôt. Nous ne sommes pas là pour travailler à ta place.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
10 janvier 2018 à 20:25:11

J'en suis là :

<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>
#example1 {
    border: 2px solid red;
    padding: 10px;
    border-radius: 15px;
  border-style: dashed;
 }


lol

-
Edité par 10lem 10 janvier 2018 à 20:25:26

10 janvier 2018 à 21:12:50

<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 10 janvier 2018 à 21:14:05

10 janvier 2018 à 21:25:50

La sujet semble être résolu... 

Pourquoi ne pas le marquer ?

Je suis quelqu’un de patient et de très stratégique . Je suis Militaire opérateur tourelle chars Leclerc ! !
10 janvier 2018 à 23:25:26

Gh0stFive a écrit:

<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
10 janvier 2018 à 23:54:26

Hello,

Si, il fera un copier/coller si il est satisfait ^^ 

Gh0stFive : dans ce cas tu dois commenter/expliquer ton code afin qu'il le comprenne et puisse le modifier à son besoin...

-
Edité par Lucky13 10 janvier 2018 à 23:54:46

11 janvier 2018 à 8:53:19

"Maintenant si ça t'amuses de pondre des codes même pas optimisé en 1 minutes, libre à toi, mais tu n'aides en rien l'auteur du post"

 Pour le code demandé, je suis tout ouïe au optimisation que tu apporterais

Et pour répondre au code "non expliquer":

Je ne vois pas pourquoi j'expliquerai un code qui est court et sans logique surtout que je le ferrai sans doute moins bien que:

https://developer.mozilla.org/fr/docs/Web/CSS/Reference

-
Edité par Gh0stFive 11 janvier 2018 à 8:53:34

11 janvier 2018 à 9:35:14

@Gh0stFive : https://jsfiddle.net/wtvbbvoc/

Mais tu comprendra bien que j'ai autre chose à faire que de corriger/optimiser un code qui est censé aider l'auteur...

"Je ne vois pas pourquoi j'expliquerai un code qui est court [...]" : Si tu ne sais pas l'expliquer, pourquoi lui avoir donné dans ce cas?

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
11 janvier 2018 à 10:13:40

""Je ne vois pas pourquoi j'expliquerai un code qui est court [...]" : Si tu ne sais pas l'expliquer, pourquoi lui avoir donné dans ce cas?" 

J'ai pas dit que je savais pas l'expliquer uniquement que ca https://developer.mozilla.org/fr/docs/Web/CSS/Reference était beaucoup plus complet que toute les explications

Et je te dis waou pour tes optimisations

Bon bref j'ai autre chose a faire que de me chamailler avec un type comme toi

tchao

11 janvier 2018 à 10:38:25

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.

11 janvier 2018 à 11:20:38

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 ^^ 

Bon le message est passé...

-
Edité par Lucky13 11 janvier 2018 à 11:21:53

11 janvier 2018 à 14:13:46

D'abord un grand merci Gh0stFive pour le code. C'est exactement ce que je cherchais : une solution à mon problème.

J'ai failli aller voir ailleurs après les premières réponses pas très "engagentes".
J'aurais peut être pas du dire que je débutais, mais que je cherchais juste la solution.
Mon niveau CSS ne me permet pas (encore) de faire ce genre de chose.
Je me sert de CSS juste pour faire quelques retouches par-ci par-là
Après je ne suis pas contre non plus le fait d'apprendre et surtout comprendre ce que je fait...

Cordialement

-
Edité par 10lem 11 janvier 2018 à 14:14:26

11 janvier 2018 à 14:16:23

Pas de souci, c'est ton choix.

Petit test, mettre le marqueur dans le coin en haut à gauche ^^

11 janvier 2018 à 14:31:29

Salut 10lem,

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 ?

11 janvier 2018 à 16:01:28

Tybok a écrit:

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.

-
Edité par 10lem 11 janvier 2018 à 16:02:55

11 janvier 2018 à 16:10:19

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 :)

-
Edité par Tybok 11 janvier 2018 à 16:12:10

Staff 11 janvier 2018 à 16:11:43

Bonjour,

suite à ta demande de liens, pour comprendre comment fonctionne border : https://developer.mozilla.org/fr/docs/Web/CSS/border , et position : https://developer.mozilla.org/fr/docs/Web/CSS/position :)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 janvier 2018 à 7:41:39

Bon j'y arrive pas car je ne comprends pas...

En plus le code ne fonctionne pas la ou je devais l'implanter. Là aussi surement parce que je n'ai pas compris

Staff 12 janvier 2018 à 7:46:03

> le code ne fonctionne pas la ou je devais l'implanter.

Tu pourrais montrer ? L'idéal serait une page en ligne. Sinon, poste dans https://codepen.io/pen :)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 janvier 2018 à 8:57:53

https://liveweave.com/sLD5bJ

-
Edité par 10lem 12 janvier 2018 à 8:58:18

12 janvier 2018 à 10:14:44

Ton lien n'est pas bon (on n'arrive pas sur ton projet)
Staff 12 janvier 2018 à 10:22:04

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 janvier 2018 à 10:32:21

Exact, autant pour moi !

10lem, ton code ne fonctionne pas car tu as fait une erreur : la déclaration .repose::before {} doit être en dehors de .reponse {}

Une accolade fermante et ton problème est réglé ;)

12 janvier 2018 à 12:02:21

Ok j'ai réglé le problème avec l'accolade sur mon site (merci).

Je cherche encore comment mettre le rouge en haut à gauche par exemple...une petite vidéo explicative peut être ?

Staff 12 janvier 2018 à 12:06:55

Pas besoin de vidéo pour ça :)

Tu cherches deux choses :

  • déplacer le bloc rouge en haut à gauche
  • en faire un coin en haut à gauche

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
12 janvier 2018 à 12:10:51

Pour ne pas te compliquer la vie tu as ca :

http://apps.eky.hk/css-triangle-generator/

tu regardes le code genere, ca t’aidera peut etre à mieux comprendre 

-
Edité par Gh0stFive 12 janvier 2018 à 12:11:54

Coin arrondi + marquer en bas a droite

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown