CSS Border ritrovo

Sto sperando che qualcuno mi può aiutare con un problema css ...CSS Border ritrovo

Sto usando un controllo ListView per visualizzare alcuni risultati, non è necessario che sia un concetto di gruppo, per raggiungere questo io sono utilizzando 2 colori di sfondo alternati tra gruppi. Sto cercando di aggiungere un bordo a questi elementi, ma poiché il bordo superiore e il bordo sinistro possono essere di colori diversi, esiste un modo per rimuovere il triangolo dove si incontrano?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p 
{ 
border-top:10px solid red; 
border-left:10px solid white; 
border-bottom-style:dotted; 
border-left-style:solid; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

fonte

2012-06-26 Ketchup

ci può mostrare un esempio di ciò che si intende con questo? – jaypeagi

gli angoli si incontrano ad angolo, se il bordo sinistro è rosso, e il bordo superiore è bianco, io sono lasciato con una freccia rossa da dove il bordo rosso incontra il bordo bianco – Ketchup

Si può scrivere in questo modo:

p{ 
    width:200px; 
    height:200px; 
    background:red; 
    border-left:5px solid pink; 
    -moz-box-shadow:inset 0 5px green; 
    box-shadow:inset 0 5px green; 
}

Scegli questa http://jsfiddle.net/nRWux/1/

box-shaow non funziona in IE8 & di seguito.

fonte

2012-06-26 11:46:23 sandeep

Grazie, funziona perfettamente :) – Ketchup

Questo è ottimo, ma c'è ancora una leggera ombra che attraversa il confine in fondo, leggermente trasparente. Nella maggior parte dei casi non è un problema, ma se hai bisogno di essere pixel-perfect, una soluzione diversa probabilmente sarebbe meglio. – basicallydan

No, non è possibile rimuovere il triangolo dove si incontrano. i confini sono implementati in questo modo e non c'è modo di aggirare.

fonte

2012-06-26 11:44:34

È possibile utilizzare box-shadow per il border-top,

Nel tuo esempio: http://jsfiddle.net/C7jnJ/

margin-top:10px; 
box-shadow:0 -10px 0 10px red;

Invece di border-top. Il margin-top viene aggiunto perché l'ombra è la visualizzazione al di fuori del 'p', Se volete dentro, allora sarebbe: http://jsfiddle.net/C7jnJ/1/

box-shadow:inset 0px 10px 0px red;

fonte

2012-06-26 11:57:27 Alvaro

Funziona anche, ma ho usato la soluzione @sandeeps – Ketchup

Ecco una soluzione compatibile con IE8 + utilizzando: prima pseudo:

Fiddle http://jsfiddle.net/PhilippeVay/hXrW5/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
p { 
    position: relative; 
    border-top:10px solid red; 
    border-bottom-style:dotted; 
    border-left-style:none; 
} 
p:before { 
    content: ''; 
    display: block; 
    width: 10px; 
    position: absolute; 
    top: -10px; /* top: 0; if you want red over blue (top over left) */ 
    bottom: 0; 
    background: blue; 
} 
</style> 
</head> 

<body> 
<p>2 different border styles.</p> 
</body> 
</html>

fonte

2012-06-26 11:59:41 FelipeAls

Great solution @FelipeAls! Grazie ;) – Dan

CSS Border ritrovo

risposta

Problemi correlati