我如何收集4个小三角形形状来制作一个大三角形？

Question

我想通过收集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>

enter link description here

Answer 1

正如我在评论中提到的，这可能是SVG / canvas是更好的解决方案的情况。我不是他们的专家，但创建一个像你想要的简单模式很简单（I used the background solution from this question）：

<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>

编辑：根据以下评论的要求，添加了一些代码来展示如何操作元素（点击两个三角形，它们的图像将交换）：

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="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 id="path1" stroke="black" d="M150,0 225,150 75,150 150,0" fill="url(#img1)" />
    <path id="path2" stroke="black" d="M0,300 75,150 150,300 0,300" fill="url(#img2)" />
    <path id="path3" stroke="black" d="M75,150 225,150 150,300 75,150" fill="url(#img3)" />
    <path id="path4" stroke="black" d="M150,300 300,300 225,150 150,300" fill="url(#img4)" />
</svg>

你也可以在这个JSFiddle上看到它：http://jsfiddle.net/4x7sh6bj/1/

Answer 2

使用边框无效......您可以使用剪裁but it isn't well supported。看一下下面的代码：

.imgwrap{
    text-align:center;
}
.up{
    -webkit-clip-path: polygon(100px 0px, 0px 150px, 200px 150px);
    clip-path: polygon(100px 0px, 0px 150px, 200px 150px);
    margin:0 -100px;
}
.down{
    -webkit-clip-path: polygon(0px 0px, 200px 0px, 100px 150px);
    clip-path: polygon(0px 0px, 200px 0px, 100px 150px);
}

<div class="imgwrap">
    <img  class="down" src="http://www.placehold.it/200x150"/>
    <img  class="up"src="http://www.placehold.it/200x150"/>
    <img  class="down"src="http://www.placehold.it/200x150"/>
    <br/>
    <img  class="down"src="http://www.placehold.it/200x150"/>
</div>