带边框的带角度的div

Question

我想用倾斜的div来开发上述设计。

到目前为止，我所做的一样多，如上图所示。

下面是代码我迄今所做的：

.brd1, .brd3, .brd8{ 
 
    background-color: #4c4c4c; 
 
} 
 
.brd, .brd-nl{ 
 
    height: 60px; 
 
} 
 
.brd2, .brd4, .brd5, .brd7{ 
 
    background-color: #289de9; 
 
} 
 
.brd2{ 
 
    border-left: 5px solid #b31989; 
 
    width: 94%; 
 
    float: left;  
 
} 
 
.brd2:before{ 
 
    border-bottom: 61px solid transparent; 
 
    border-left: 45px solid #289de9; 
 
    right: 7px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 0px; 
 
    position: absolute;  
 
} 
 
.brd3:after{ 
 
    border-top: 60px solid transparent; 
 
    border-right: 45px solid #4c4c4c; 
 
    left: -30px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 0px; 
 
    position: absolute;  
 
} 
 
.brd6{ 
 
    background-color: #3c6bb1; 
 
    width: 94%; 
 
} 
 
.brd6:after{ 
 
    border-top: 60px solid transparent; 
 
    border-left: 40px solid #3c6bb1; 
 
    right: 12px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 0px; 
 
    position: absolute;  
 
} 
 
.brd7:before{ 
 
    border-bottom: 61px solid transparent; 
 
    border-right: 45px solid #289de9; 
 
    left: -30px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    top: 0px; 
 
    position: absolute; 
 
} 
 
.brd7{ 
 
    border-right: 5px solid #b31989;; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class=""> 
 
    <div class=""> 
 
     <div class="brd brd1 col-lg-1 col-md-1 col-sm-1"></div> 
 
     <div class="brd col-lg-5 col-md-5 col-sm-5 col-xs-12"> 
 
      \t <h3 class="brd2"></h3> 
 

 
     </div> 
 
     <div class="brd col-lg-5 col-md-5 col-sm-5 col-xs-12"> 
 
      \t <h3 class="brd3"> \t \t \t \t \t \t \t \t 
 
    \t \t \t \t </h3> 
 

 
     </div> 
 
     <div class="brd brd4 col-lg-1 col-md-1 col-sm-1"></div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="space-1"></div> 
 
    <div class=""> 
 
     <div class="brd-nl brd5 col-lg-1 col-md-1 col-sm-1"></div> 
 
     <div class="brd-nl col-lg-5 col-md-5 col-sm-5 col-xs-12"> 
 
      \t <h3 class="brd6"></h3> 
 

 
     </div> 
 
     <div class="brd-nl col-lg-5 col-md-5 col-sm-5 col-xs-12"> 
 
      \t <h3 class="brd7"></h3> 
 

 
     </div> 
 
     <div class="brd-nl brd8 col-lg-1 col-md-1 col-sm-1"></div> 
 
    </div> 
 
</div>

我需要补充的是倾斜的边框。

Answer 1

这是我的尝试（在Chrome 42.0.2311.135测试）：

http://codepen.io/anon/pen/BNKzgG

成角度div S被4个不同的linear-gradients制成，一些宽度通过vw单位计算。红色边框通过蓝色梯度内的颜色步骤或第二个梯度重叠实现。

我也简化了您的标记尽可能和你愿意，你可以添加尽可能多的项目（尽量以取消对codepen标记）

标记

<ul> 
    <li>Injection mould making</li> 
    <li>Service and repair</li> 
    <li>Jigs and fixtures</li> 
    <li>Custom machining</li> 
</ul> 

CSS（相关）

ul li { 
    float: left; 
    width: 45%; 
    position: relative; 
    background-repeat: no-repeat !important; 
    ... 
} 

/* linear gradients for angled effect and red lines */ 

ul li:nth-child(4n-3) { 

    background: 
     /* vertical red line */ 
     linear-gradient(to right, 
      red 0px, 
      red 5px, 
      transparent 5px), 

     linear-gradient(135deg, 
      #0b3a5e 0, 
      #0b3a5e calc(100% - 30px),  
      transparent calc(100% - 30px)); 
} 

ul li:nth-child(4n-2) { 

    background: 
     linear-gradient(135deg, 
      transparent 25px, 
      red 25px, 
      red 28px, 
      #2f98e9 28px); 
} 

ul li:nth-child(4n-1) { 

    background: 
     linear-gradient(45deg, 
     #276da2 0, 
     #276da2 calc(100% - 33px), 
     red calc(100% - 33px), 
     calc(100% - 30px), 
     transparent calc(100% - 30px)); 
} 

ul li:nth-child(4n) { 

    background: 
     /* vertical red line */ 
     linear-gradient(to left, 
      red 0px, 
      red 5px, 
      transparent 5px), 

     linear-gradient(45deg, 
      transparent 25px, 
      #0b3a5e 25px); 
} 

... 

/* blocks aside */ 

ul li:after, 
ul li:before { 
    content: ""; 
    position: absolute; 
    z-index -1; 
    top: 0; 
    width: calc(5vw + 12px); 
    height: 100%; 
} 

/* calculate correct position */ 

ul li:nth-child(2n):after { 
    right: calc(-5vw - 15px); 
} 

ul li:nth-child(2n + 1):before { 
    left: calc(-5vw - 15px); 
} 

/* colour assignment */ 

ul li:nth-child(4n-3):before, 
ul li:nth-child(4n):after { 
    background: #0b3a5e; 
} 

ul li:nth-child(4n-2):after, 
ul li:nth-child(4n-1):before { 
    background: #2f98e9; 
} 

---

最终结果

注意，为了简单起见，我没有指定任何厂商前缀calc和linear-gradient。如果您需要支持特定的旧浏览器，请插入其前缀版本。

Answer 2

你可以使用普通的CSS来获得那些有角度的边框。

#upper{ 
 
    width: 100px; 
 
height: 0px; 
 
border-bottom: 24px solid #2f98e9; 
 
border-left: 20px solid transparent; 
 
    margin-top:50px; 
 
    } 
 
#lower{ 
 
    width: 100px; 
 
height: 0px; 
 
border-top: 24px solid #0b3a5e; 
 
border-left: 20px solid transparent; 
 
margin-top:5px; 
 
} 
 
#lupper{ 
 
    width: 100px; 
 
height: 0px; 
 
border-bottom: 24px solid #2f98e9; 
 
border-right: 20px solid transparent; 
 
    } 
 
#llower{ 
 
    width: 100px; 
 
height: 0px; 
 
border-top: 24px solid #0b3a5e; 
 
border-right: 20px solid transparent; 
 
margin-top:5px; 
 
}

<div id="lupper"></div> 
 
<div id="llower"></div> 
 
<div id="upper"></div> 
 
<div id="lower"></div>

使用他们在任何你需要让你的形象