Угловой дивизион с рамкой

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>

использовать их там, где когда-либо вам требуется, чтобы получить форму вы упомянули в образе