javascript - 我怎样才能收集 4 个小三 Angular 形来组成一个大三 Angular 形？

Question

我想做一个图像背景三 Angular 形，由 4 个小三 Angular 形组成，就像这个图像

我怎样才能制作这个三 Angular 形图像背景形状的集合？!

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

---

编辑:按照下面评论中的要求，添加了一些代码来展示如何操作元素(点击两个三 Angular 形，它们的图像将交换):

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/