Как мне собрать 4 маленьких треугольника, чтобы сделать большой треугольник?

135
26 мая 2019, 03:00

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

Как я могу сделать эту коллекцию форм изображения треугольника? 

.block { 
    width: 0; 
    height: 0; 
    border: solid 20px;     
    float: left; 
} 
.clear { 
    clear: both; 
} 
.top { 
    margin-left: 38px; 
} 
.top .left {     
    border-color: transparent green green transparent; 
} 
.top .right {     
    border-color: transparent transparent green green; 
} 
.bottom .left1 {     
    border-color: transparent red red transparent; 
} 
.bottom .mid1 {     
    border-color: blue blue red red; 
} 
.bottom .mid2 {     
    border-color: blue purple purple blue; 
} 
.bottom .right1 {     
    border-color: transparent transparent purple purple; 
}
<div class="top"> 
    <div class="block left"></div> 
    <div class="block right"></div> 
    <div class="clear"></div> 
</div> 
<div class="bottom"> 
    <div class="block left1"></div> 
    <div class="block mid1"></div> 
    <div class="block mid2"></div> 
    <div class="block right1"></div> 
</div>

Answer 1

Как я уже упоминал в комментариях, это может быть случай, когда SVG / canvas является лучшим решением. 

<svg width="300" height="300"> 
    <defs> 
        <pattern id="img1" width="100%" height="100%"> 
            <image xlink:href="http://lorempixel.com/200/200/people/" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img2" width="100%" height="100%"> 
            <image xlink:href="http://lorempixel.com/200/200/animals/" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img3" width="100%" height="100%"> 
            <image xlink:href="http://lorempixel.com/200/200/abstract/" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img4" width="100%" height="100%"> 
            <image xlink:href="http://lorempixel.com/200/200/sports/" x="0" y="0" width="200" height="200"/> 
        </pattern> 
    </defs> 
    <path d="M150,0 225,150 75,150" fill="url(#img1)" /> 
    <path d="M0,300 75,150 150,300" fill="url(#img2)" /> 
    <path d="M75,150 225,150 150,300" fill="url(#img3)" /> 
    <path d="M150,300 300,300 225,150" fill="url(#img4)" /> 
</svg>

Edit: как указано в комментариях ниже, добавлен некоторый код, чтобы показать, как манипулировать элементами (щелкните по двум треугольникам, и их изображения будут меняться): 

var step = 0; 
var $prev; 
 
$("path").on("click", function() { 
    switch (step) { 
        // if it's the first step: save the current element for later 
        case 0: 
            step = 1; 
            $prev = $(this); 
            break; 
        // if it's the second step: swap images and start again 
        case 1: 
            step = 0; 
            var aux = $prev.attr("fill"); 
            $prev.attr("fill", $(this).attr("fill")); 
            $(this).attr("fill", aux); 
            break; 
    } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<svg width="300" height="300"> 
    <defs> 
        <pattern id="img1" width="100%" height="100%"> 
            <image xlink:href="https://i.stack.imgur.com/N1DGN.png" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img2" width="100%" height="100%"> 
            <image xlink:href="https://i.stack.imgur.com/aEK3H.png" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img3" width="100%" height="100%"> 
            <image xlink:href="https://i.stack.imgur.com/phSLq.png" x="0" y="0" width="200" height="200" /> 
        </pattern> 
        <pattern id="img4" width="100%" height="100%"> 
            <image xlink:href="https://i.stack.imgur.com/G2Zn4.png" x="0" y="0" width="200" height="200"/> 
        </pattern> 
    </defs> 
    <path d="M150,0 225,150 75,150" fill="url(#img1)" /> 
    <path d="M0,300 75,150 150,300" fill="url(#img2)" /> 
    <path d="M75,150 225,150 150,300" fill="url(#img3)" /> 
    <path d="M150,300 300,300 225,150" fill="url(#img4)" /> 
</svg>

READ ALSO
Изменить внутренний блок iframe
javascript

Изменить внутренний блок iframe

Столкнулся с проблемой, не могу добраться до внутренних данных iframe, через метод jquerycontents()не получается, я так понимаю потому что на момент...

 120
Не хочет срабатывать ID со слешем [дубликат]
javascript

Не хочет срабатывать ID со слешем [дубликат]

На данный вопрос уже ответили:

 137
laravel mix babel
javascript

laravel mix babel

Помогите разобратьсяИмеется IE 11, который как я понимаю использует ECMAScipt2015, в котором НЕТ поддержки exponentiation (**) operator

 125
Горизонтальный скроллинг
javascript

Горизонтальный скроллинг

Подскажите, пожалуйста, на каком языке и как можно сделать, чтобы на сайте, при крокрутке колесом мыши, скролилось именно по горизонтали, а не по вертикали?

 143