带边框的角度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">
            	<h3 class="brd2"></h3>

        </div>
        <div class="brd col-lg-5 col-md-5 col-sm-5 col-xs-12">
            	<h3 class="brd3">								
    				</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">
            	<h3 class="brd6"></h3>

        </div>
        <div class="brd-nl col-lg-5 col-md-5 col-sm-5 col-xs-12">
            	<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由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>

在需要获得图像

中提到的形状的地方使用它们