CSS Border Meeting

Mam nadzieję, że ktoś może mi pomóc z problemem css ...CSS Border Meeting

Używam ListView do wyświetlania pewne rezultaty, nie jest wymagane, aby mieć pojęcie grupy, aby osiągnąć to jestem używanie 2 kolorów tła na przemian między grupami. Próbuję dodać obramowanie do tych elementów, ale jako że brzeg i lewy brzeg mogą być w różnych kolorach, czy istnieje sposób na usunięcie trójkąta tam, gdzie się spotykają?

<!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>

Źródło

2012-06-26 Ketchup

można pokazać nam przykład tego, co masz na myśli przez to? – jaypeagi

narożniki spotykają się pod kątem, jeśli lewa krawędź jest czerwona, a górna krawędź jest biała, pozostawiam czerwoną strzałkę, od której czerwona krawędź styka się z białą granicą – Ketchup

można napisać tak:

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; 
}

Sprawdź to http://jsfiddle.net/nRWux/1/

box-shaow nie działa w IE8 & poniżej.

Źródło

2012-06-26 11:46:23 sandeep

Dziękuję, działa idealnie :) – Ketchup

To jest świetnie, ale na samym dole wciąż jest niewielka ilość cienia, nieco przezroczysta. W większości przypadków nie stanowi to problemu, ale jeśli potrzebujesz doskonałości pikseli, inne rozwiązanie byłoby prawdopodobnie lepsze. – basicallydan

Nie, nie można usunąć trójkąta w miejscu, w którym się znajdują. granice są realizowane w ten sposób i nie ma możliwości obejścia.

Źródło

2012-06-26 11:44:34

Można użyć box-shadow dla border-top,

W przykładzie: http://jsfiddle.net/C7jnJ/

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

zamiast border-top. Margines-top dodaje ponieważ cień jest wyświetlanie poza „p”, Jeżeli podoba ci się w środku, to byłoby: http://jsfiddle.net/C7jnJ/1/

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

Źródło

2012-06-26 11:57:27 Alvaro

To również działa, ale użyłem rozwiązania @sandeeps – Ketchup

Oto rozwiązanie kompatybilne z IE8 + przy użyciu: przed 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>

Źródło

2012-06-26 11:59:41 FelipeAls

Świetne rozwiązanie @FelipeAls! Dzięki ;) – Dan

Odpowiedz

Powiązane problemy