造成这种斜边界问题的原因是什么？

Question

我正在尝试删除斜边框问题，最好将其显示在图片中：

http://i41.tinypic.com/2i6i3oz.png

这是应用于div的css：

.blog_post {background: #fff}

.blog_post .post {
    border-right-color: #F1F1F1;
    border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #FFFFFF;
    border-width: 10px;
}
.blog_post .post {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #9A9570;
    border-color: #8F8960 #8F8960 -moz-use-text-color;
    border-image: none;
    border-style: solid;
    border-width: 10px;
    float: left;
    margin: -560px 0 0 -12px;
    padding: 28px 30px;
    position: relative;
    width: 528px;
    z-index: 9;
}

非常感谢任何帮助。

Answer 1

简单方法：另一个容器

你不能使用传统的HTML边框，因为它们在上面显示的工作（这就是CSS三角形的工作原理！）。获得此效果的最简单方法是将元素包装在另一个容器中。

Demo

<强> HTML

<div class="container">
    <div class="inner-container">
        ...
    </div>
</div>

<强> CSS

.container {
    border-top:10px solid red;
    border-bottom:10px solid red;
}

.inner-container {
    border-left:10px solid blue;
    border-right:10px solid blue;
}

困难的方法：:before和:after

这种方法有点棘手，但你可以设法只用一个包装元素将它拉下来。

Demo

<强> HTML

<div class="container">
    ...
</div>

<强> CSS

.container {
    border-top:10px solid red;
    border-bottom:10px solid red;
    position:relative;
    /* pad out the left and right to allow room for the border */
    padding:0 10px;
}

.container:before,
.container:after {
    position:absolute;
    top:0;
    bottom:0;
    width:10px;
    background-color:blue;
    display:block;
    content:"";
}

.container:before {
    left:0;
}

.container:after {
    right:0;
}

Answer 2

您始终可以使用inset box shadows。它们非常易于使用，并且它们不需要太多CSS，也不必更改HTML。

检查出来。 jsFiddle here

div {
    box-shadow: inset 0px 10px 0px red;
    border: 10px solid blue;
    border-top: 0px;
}

Answer 3

使用伪类:before和:after

.border-fixed {
  width: 300px;
  height: 300px;
  background: #EEE;
  margin: 60px auto 0;
  border: solid 10px #DDD;
  border-top-color: #BBB;
  position: relative;
}

.border-fixed:before,
.border-fixed:after {
  content: "";
  top: -10px;
  left: -10px;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #BBB;
}

.border-fixed:before {
  right: -10px;
  left: auto;
}