CSS Border Treffpunkt

Ich hoffe, dass jemand mir mit einem CSS-Problem helfen ...CSS Border Treffpunkt

ich ein Listview verwenden einige Ergebnisse angezeigt werden, es ist erforderlich, ein Konzept der Gruppierung zu sein, dies zu erreichen, ich bin Verwendung von 2 Hintergrundfarben, die zwischen Gruppen wechseln. Ich versuche, diesen Elementen einen Rahmen hinzuzufügen, aber da der Rand oben und der Rand links unterschiedliche Farben haben können, gibt es eine Möglichkeit, das Dreieck dort zu entfernen, wo sie sich treffen?

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

Quelle

2012-06-26 Ketchup

Können Sie uns ein Beispiel von dem, was Sie damit meinen? – jaypeagi

die Ecken treffen sich in einem Winkel, wenn der linke Rand rot ist, und der obere Rand ist weiß, ich bin links mit einem roten Pfeil von wo die rote Grenze die weiße Grenze trifft – Ketchup

Sie können wie folgt schreiben:

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

prüfen diese http://jsfiddle.net/nRWux/1/

kasten shaow nicht & unten in IE8 arbeiten.

Quelle

2012-06-26 11:46:23 sandeep

Danke, funktioniert perfekt :) – Ketchup

Dies ist großartig, aber es gibt immer noch eine kleine Menge Schatten, die ganz unten in die Grenze eindringen, leicht durchsichtig. In den meisten Fällen kein Problem, aber wenn Sie pixelgenau sein müssen, wäre wahrscheinlich eine andere Lösung besser. – basicallydan

Nein, es ist nicht möglich, das Dreieck zu entfernen, wo sie sich treffen. Grenzen werden so umgesetzt und es gibt keinen Weg.

Quelle

2012-06-26 11:44:34

Sie können box-shadow für die border-top verwenden,

In Ihrem Beispiel: http://jsfiddle.net/C7jnJ/

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

Statt border-top. Die margin-top hinzugefügt wird, weil der Schatten außerhalb des ‚p‘ angezeigt wird, wenn Sie es nach innen mögen würde, dann wäre es: http://jsfiddle.net/C7jnJ/1/

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

Quelle

2012-06-26 11:57:27 Alvaro

Das funktioniert auch, aber ich habe @sandeeps Lösung – Ketchup

Hier ist eine Lösung kompatibel mit IE8 + Verwendung: vor 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>

Quelle

2012-06-26 11:59:41 FelipeAls

Große Lösung @FelipeAls! Vielen Dank ;) – Dan

CSS Border Treffpunkt

Antwort

Verwandte Themen