Faire une bordure tronquée en CSS [Résolu]

Signaler
Messages postés
7
Date d'inscription
lundi 29 juillet 2013
Statut
Membre
Dernière intervention
14 février 2018
-
Messages postés
7
Date d'inscription
lundi 29 juillet 2013
Statut
Membre
Dernière intervention
14 février 2018
-
Bonjour,

Je vous présente mes excuses si vous me trouvez pas assez clair; à vrai dire, j'ai chercher en vain les mots appropriés pour décrire ma préoccupation mais, je joins quelques images à ce message pour vous faire une idée sur mon souci.

Au fait, je cherche à faire un menu et un label avec une bordure tronquée qui indique le plus un endroit ou un élément sur une page web.

S'il vous plait, bien vouloir voir les exemples ci-dessous:




Merci pour votre compréhension et votre disponibilité.

1 réponse

Messages postés
43
Date d'inscription
mercredi 8 novembre 2006
Statut
Membre
Dernière intervention
29 décembre 2020
2
Comme tu le dis c'est d'abord du CSS un peu comme une bulle de dialogue
commençons par créer notre structure
<div class="bulle">
test
<div class="arrow_border"></div>
</div>

puis le CSS
.bulle{
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    text-align:center;
    width:20%;
    border:1px solid #555555;
}
.bubble .arrow_border{
    width:0;
    height:0;
    line-height:0;
    border-bottom:30px solid transparent;/*Grâce au deux lignes il créera une flêche*/
    border-left:30px solid transparent;
    border-right:30px solid #555555; /* couleur de la bordure de la bulle */
    position:absolute;
    bottom:-30px;
    right:65px;
}


Tout ce qu'il te reste à faire c'est recréer cette boîte avec JS et DOM pour les avoir sur demande
Messages postés
7
Date d'inscription
lundi 29 juillet 2013
Statut
Membre
Dernière intervention
14 février 2018

Bonjour CecilCordheley,

Merci beaucoup pour ta réponse, cela a vraiment répondu à ma préoccupation.

Cdlt.