边界明确切割div(Border a div with clear cuts)

这是一个带有边框的框： http ： //jsfiddle.net/wywmLshc/

.box{ height:300px; width:900px; border-left: 15px solid black; border-top:5px solid red; border-bottom: 5px solid red; }

有一个45度角，黑色和红色边界交叉。我不想要这个。我只想在左边有一个黑色边框，红色边框在它旁边（不在它上面）。我需要制作另一个div来完成这个吗？或者是否有一些巧妙的CSS技巧解决了这个问题？

Here's a box with some borders: http://jsfiddle.net/wywmLshc/

.box{ height:300px; width:900px; border-left: 15px solid black; border-top:5px solid red; border-bottom: 5px solid red; }

There's a 45 degree angle where the black and red border crosses. I don't want this. I want only a black border to the left and the red one starts next to it (not any above it). Do I need to make another div to accomplish this? Or is there some neat CSS-trick that solves the issue?

最满意答案

这就是边框的呈现方式。要实现您想要的，请使用伪元素：

.box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative
}
.box:before {
    content:'';
    position:absolute;
    width:15px;
    top:-5px; /* .box border-top value */
    bottom:-5px; /* .box border-bottom value */
    left: -15px; /* .box:before width */
    background: black;
} 
  <div class="box"></div> 
  
 
 
 或者使用box-shadow ：  
 
 
  
  .box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative;
    box-shadow: -15px 0 0 0 black;
} 
  <div class="box"></div> 
  
 
That's how the border is rendered. To achieve what you want, use pseudo elements instead: 
 
 
  
  .box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative
}
.box:before {
    content:'';
    position:absolute;
    width:15px;
    top:-5px; /* .box border-top value */
    bottom:-5px; /* .box border-bottom value */
    left: -15px; /* .box:before width */
    background: black;
} 
  <div class="box"></div> 
  
 
 
Or use box-shadow: 
 
 
  
  .box {
    height:300px;
    width:900px;
    border-top:5px solid red;
    border-bottom: 5px solid red;
    position:relative;
    box-shadow: -15px 0 0 0 black;
} 
  <div class="box"></div>