треугольные сетки с помощью CSS или JQuery

Я работаю над дизайном для сайта и хотите иметь треугольную сетку в одной из секций вроде как картинки здесь:треугольные сетки с помощью CSS или JQuery

example image of triangular grid

Я не уверен, как подойти к этому, так как все методы, с которыми я столкнулся, не выполняют эту работу хорошо.

Вот моя первая попытка с помощью CSS http://jsfiddle.net/df5wx36e/2/

.container { 
    margin-left: 200px; 
    width: 1200px; 
    display: block; 
    clear: both; 
} 

.up { 
    width: 0px; 
    height: 0px; 
    border-style: inset; 
    border-width: 0 200px 200px 200px; 
    border-color: transparent transparent #007bff transparent; 
    float: left; 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    margin-left: -200px; 
} 

.up p { 
    text-align: center; 
    top: 80px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 53px; 
    margin: 0px; 
} 

.down { 
    width: 0px; 
    height: 0px; 
    border-style: inset; 
    border-width: 200px 200px 0 200px; 
    border-color: #007bff transparent transparent transparent; 
    float: left; 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
    margin-left: -200px; 
} 

.down p { 
    text-align: center; 
    top: -140px; 
    left: -47px; 
    position: relative; 
    width: 93px; 
    height: 53px; 
    margin: 0px; 
} 

<div class="container"> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div>  
</div> 

<div class="container"> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
</div> 

<div class="container"> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
    <div class="up"> 
     <p>some info<p> 
    </div> 
    <div class="down"> 
     <p>some info<p> 
    </div> 
</div>

, но содержимое не вровень с треугольниками и легко переполнить. Также с созданием треугольников с использованием границ css я не могу установить фон треугольников или действительно иметь какие-либо измерения, чтобы содержать контент.

В идеале сетка должна быть шириной 1200 пикселей и содержать 4 полных треугольника в строке и с половиной или полуугольниками на концах в зависимости от строки.

Любые предложения или помощь были бы высоко оценены! Спасибо.

источник

2015-01-26 Eudemonics

Вы имеете в виду 5 в строке? Предполагается ли, что ориентация треугольников (точка, обращенная вверх или точка вниз) должна содержать контент? –

Привет, Иосиф, да, я хотел, чтобы обе ориентации содержали контент. Я не буду суетиться о количестве треугольников в строке точно. Просто нужен лучший способ создания треугольной сетки, чем я мог бы придумать сам, поскольку он не подходит для цели. – Eudemonics

Я считаю, что вы пытаетесь достичь, это возможно с Slantastic, то есть, если вы хотите, чтобы содержимое ваших треугольников не должно быть больше, чем просто 93px прямоугольников ... Я не играл с ним сам (никогда был проект, который это требовал), но он выглядит как правильный инструмент для работы.

источник

2015-01-26 20:57:08

треугольные сетки с помощью CSS или JQuery

ответ

Смежные вопросы