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

hghayour 发表于 Dev

hghayour

我想制作一个通过收集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>

在此处输入链接说明

阿尔瓦罗·蒙托罗

正如我在评论中提到的那样，在这种情况下，SVG /画布可能是更好的解决方案。我不是他们的专家，但是创建像您想要的那样的简单模式很简单（我使用了这个问题的背景解决方案）：

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