È possibile imitare il bordo della cresta CSS, ma con colori personalizzati?

Question

Desidero essenzialmente avere una "cresta" bordo stile ma con colori personalizzati. Con border-style: ridge sembra che non sia possibile inserire colori diversi, il browser ne utilizza solo uno leggermente più chiaro e uno leggermente più scuro del colore specificato.

La mia attuale soluzione è questa, ma non è l'ideale a causa del <div>

<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

L'elemento successivo in basso non può avere il bordo superiore impostato su quel colore (ha i suoi stili ed è separato), quindi l'idea è fuori. C'è qualcos'altro che posso provare?

Answer 1

Il tuo esempio sembra suggerire di voler creare una linea increspata come separatore tra l'intestazione e il resto, piuttosto che un bordo increspato attorno a un elemento. Perché non usi un hr per questo, dal momento che è praticamente esattamente quello che serve?

Puoi quindi dargli un bordo e impostare i tuoi colori sui diversi lati.

Answer 2

Non conforme alle specifiche per CSS 3 (Sezione 8.5.3):

  

Il colore dei bordi disegnati per i valori   di "groove", "ridge", "inset" e   'inizio' dipende dall'elemento   proprietà del colore del bordo, ma gli Emirati Arabi Uniti possono   scegliere il proprio algoritmo per   calcola i colori effettivi utilizzati.

Tecnicamente suppongo che "scelga il proprio algoritmo" potrebbe comportare il permesso allo sviluppatore di impostarli, ma nessun user-agent sembra farlo a questo punto. Naturalmente, anche se lo facessero, avresti una soluzione solo per quel motore di rendering.

Answer 3

Non esiste un modo ufficiale per farlo, ma probabilmente potresti imitare l'effetto. Un bordo increspato è in realtà solo un bordo interno che a sua volta ha un bordo iniziale attorno ad esso (che a sua volta è solo un bordo solido con colori del bordo leggermente diversi per sinistra / in alto e in basso / a destra).

Qualcosa del genere dovrebbe darti una buona approssimazione di ciò che vuoi, o esattamente quello che stavi cercando.

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

Answer 4

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>