2
votes

Deux bordures de largeurs différentes sur 3 côtés

J'ai eu ce code pour créer une double bordure sur différentes largeurs, mais j'en ai besoin pour s'afficher uniquement sur les côtés gauche, supérieur et droit. C'est bien avec la propriété border mais pas possible avec contour car il ne partage pas la même bordure gauche etc

border: double 4px black;
outline: solid 3px black;

toute aide serait géniale

html css border outline

1 commentaires

Pourquoi ne pas supprimer le contour et créer à la place un élément imbriqué à l'intérieur de l'élément que vous avez déjà avec le deuxième style de bordure souhaité?

5 Réponses :

0
votes

Créez des éléments imbriqués avec leur propre identifiant

#outer-border{border-bottom: none}
#inner-border{border-bottom: none}

Ensuite, définissez les propriétés CSS correctes pour ces éléments, par exemple quelque chose comme:

<div id="outer-border">
   <div id="inner-border"></div>
</div>

0 commentaires

2
votes

Vous pouvez utiliser box- shadow au lieu de outline - voir la démo ci-dessous:

<div>&nbsp;</div>

div {
  line-height: 20px;
  border-color: black;
  border-style: double;
  border-width: 4px 4px 0 4px;
  box-shadow: -3px 0 0 0 black,  /* left */
              3px 0 0 0 black,  /* right */
              3px -3px 0 0 black, /* top */
              -3px -3px 0 0 black; /* top */
}

0 commentaires

3
votes

Pourquoi ne pas supprimer le contour et créer à la place un élément imbriqué à l'intérieur de l'élément?

Vous pouvez faire comme ceci:

Créer des éléments imbriqués en HTML:

.big{
      border: 5px solid green;
      border-bottom: none;
    }
.small{
        border: 2px solid black;
        border-bottom: none;
        margin: 2px;
    }

1 commentaires

créer un violon js

0
votes

Voici une idée utilisant un dégradé pour créer la deuxième bordure.

<div class="box">

</div>

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  right:3px;
  bottom:0;
  border: solid 4px green;
  border-bottom:none;
}

Une autre idée utilisant un pseudo élément:

<div class="box">

</div>

.box {
  width: 200px;
  height: 200px;
  border: solid 2px red;
  border-bottom:none;
  padding:3px; /*control the distance between border*/
  padding-bottom:0;
  background:
    linear-gradient(green,green) top  /100% 4px,
    linear-gradient(green,green) left /4px  100%,
    linear-gradient(green,green) right/4px  100%;
  background-repeat:no-repeat;
  background-origin:content-box;
}

0 commentaires

0
votes

<div class="st1"><div class="st2">test</div></div>

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    border: 3px solid black;
    border-bottom: none;
    width: 400px;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}
.st2 {
    border: 1px solid black;
    border-bottom: none;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

<div class="st1"><div class="st2"></div></div>

.st1, .st2 {
    background-color: yellow;
}
.st1 {
    outline: solid 3px black;
    width: 400px;
    height: 200px;
    position: relative;
}
.st2 {
border-left-color: black;
border-left-style: double;
border-left-width: 4px;
border-top-color: black;
border-top-style: double;
border-top-width: 4px;
border-right-color: black;
border-right-style: double;
border-right-width: 4px;
position: absolute;
left: -1px;
right: -1px;
top: -1px;
bottom: -3px;
}

0 commentaires