Question

我希望有人可以帮助我解决css问题...

我使用listview来显示一些结果，需要有一个分组的概念，为了达到这个目的，我在组之间交替使用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>

Answer 1

您可以这样写：

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/

box-shaow在IE8＆amp;下方。

Answer 2

您可以使用box-shadow作为border-top，

在您的示例中：http://jsfiddle.net/C7jnJ/

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

而不是border-top。添加margin-top是因为阴影显示在'p'之外，如果你想在里面，那么它将是：http://jsfiddle.net/C7jnJ/1/

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

Answer 3

这是一个与IE8 +兼容的解决方案：使用：pseudo之前：

小提琴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>

Answer 4

不，不可能删除它们相遇的三角形。边界是以这种方式实现的，没有办法解决。

CSS边界汇点

4 个答案: