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

ZORTRE 7 Messages postés lundi 29 juillet 2013Date d'inscription 14 février 2018 Dernière intervention - 11 oct. 2017 à 12:33 - Dernière réponse : ZORTRE 7 Messages postés lundi 29 juillet 2013Date d'inscription 14 février 2018 Dernière intervention
- 14 févr. 2018 à 14:40
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é.
Afficher la suite 

Votre réponse

2 réponses

CecilCordheley 36 Messages postés mercredi 8 novembre 2006Date d'inscription 13 février 2018 Dernière intervention - 18 janv. 2018 à 00:01
0
Merci
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
ZORTRE 7 Messages postés lundi 29 juillet 2013Date d'inscription 14 février 2018 Dernière intervention - 14 févr. 2018 à 14:40
Bonjour CecilCordheley,

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

Cdlt.
Commenter la réponse de CecilCordheley

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.