3

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

这是应用于 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;
}

任何帮助将不胜感激。

4

3 回答 3

3

简单的方法：另一个容器

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

演示

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

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

演示

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;
}
于 2013-10-11T18:10:42.593 回答
1

您可以随时使用inset box shadows. 它们非常易于使用，不需要太多 CSS，也不需要更改 HTML。

一探究竟。jsFiddle在这里

div {
    box-shadow: inset 0px 10px 0px red;
    border: 10px solid blue;
    border-top: 0px;
}
于 2013-10-11T18:16:25.257 回答
0

使用伪类: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;
}
于 2013-10-11T18:17:41.613 回答