CSSボーダー会議がポイント

、私は誰かがCSSの問題で私を助けることができる期待しています

...私はいくつかの結果を表示するには、リストビューを使用していますCSSボーダー会議がポイント

、私はこれを達成するために、グループ分けの概念があることが必要ですグループ間で2つの背景色を交互に使用します。私はこれらの要素に境界線を追加しようとしていますが、境界線と境界線が異なる色になる可能性があるため、三角形を削除する方法はありますか？

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

出典

2012-06-26 Ketchup

あなたは私たちにあなたがこれで何を意味するかの例を示してもらえますか？ – jaypeagi

角が斜めに出会う、左の境界が赤で上の境界が白い場合、赤い境界が白い境界を満たす場所から赤い矢印が残っています – Ketchup

あなたはこのように書くことができます。

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

チェックこのhttp://jsfiddle.net/nRWux/1/

ボックスshaowは以下IE8 &では動作しません。

出典

2012-06-26 11:46:23 sandeep

ありがとう、完璧に動作します:) – Ketchup

これはです素晴らしいですが、ちょっと透明な、底の境界線を横切るわずかな量の影が残っています。ほとんどの場合、問題はありませんが、ピクセル完全にする必要がある場合は、おそらく別の解決策が良いでしょう。 – basicallydan

いいえ、満たしている三角形を削除することはできません。そのようにして境界線が実装され、周囲に道がありません。

出典

2012-06-26 11:44:34

あなたはあなたの例では、ボーダートップため

をボックスシャドウを使用することができます。http://jsfiddle.net/C7jnJ/

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

代わりのボーダートップを。影が「P」の外に表示されているので、あなたが内側にそれをご希望の場合マージントップは、追加され、それは次のようになります。pseudo前：http://jsfiddle.net/C7jnJ/1/は

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

出典

2012-06-26 11:57:27 Alvaro

これも動作しますが、@sandeepsソリューションを使用しました – Ketchup

ここでIE8が使用して+と互換性ソリューションです

フィドル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>

出典

2012-06-26 11:59:41 FelipeAls

素晴らしいソリューション@FelipeAls！ありがとう;） – Dan

CSSボーダー会議がポイント

答えて

関連する問題