javascript - 4 盒子里的三 Angular 形，里面有图像

Question

我需要帮助在 CSS/jQuery/SVG/Canvas 中创建类似上图的内容

每个三 Angular 形都将包含一个图像，需要对其进行裁剪以适合三 Angular 形，并且所有内容都需要响应。

我设法通过 CSS 边框做到了这一点，但令我惊讶的是我无法向其中添加图像。

非常感谢任何类型的提示或信息。

通过 CSS 生成的示例:

<div class="middle_section" style="height: 900px;">
    <div class="one_forth triangleMask for_1"></div>
    <div class="one_forth triangleMask for_2"></div>
    <div class="one_forth triangleMask for_3"></div>
    <div class="one_forth triangleMask for_4"></div>
</div>

.middle_section .for_3,
    .middle_section .for_1{
        width: 100%;
        height: 50%;
        overflow: hidden;
    }

    .middle_section .for_2,
    .middle_section .for_4{
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    .middle_section .for_1:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 440px 808px 0px 808px;
        border-color: #ff0000 transparent transparent transparent;
        content: '';
        position: absolute;
        top:0;
        left:10px;
    }

    .middle_section .for_2:after {
        width: 0;
        height: 0;
        border-top: 440px solid transparent;
        border-bottom: 440px solid transparent;
        border-left: 808px solid lime;
        content: '';
        position: absolute;
        top:10px;
    }

    .middle_section .for_3:after {
        width: 0;
        height: 0;
        border-left: 808px solid transparent;
        border-right: 808px solid transparent;
        border-bottom: 440px solid #4679BD;
        content: '';
        position: absolute;
        bottom:0;
        left:10px;
    }

    .middle_section .for_4:after {
        width: 0;
        height: 0;
        border-top: 440px solid transparent;
        border-bottom: 440px solid transparent;
        border-right: 808px solid pink;
        content: '';
        position: absolute;
        top:10px;
        right:0;
    }

Answer 1

我用 CSS transform rotate 做了一个例子:

.wrapper {
  width:284px;
  height:281px;
  overflow: hidden;
  position: relative;
}

.top {
  transform: rotate(45deg);
  position: absolute;
  top:-100px;
  left: 40px;
}

.bottom {
  transform: rotate(45deg);
  position: absolute;
  bottom: -105px;
  left: 40px;
}

.left {
  transform: rotate(45deg);
  position: absolute;
  left: -102px;
  top: 41px;
}

.right {
  transform: rotate(45deg);
  position: absolute;
  right: -98px;
  top: 41px;
}

<div class="wrapper">

  <div class="top">
     <img src="http://lorempixel.com/200/200/sports/1"/>
  </div>
  
  <div class="bottom">
     <img src="http://lorempixel.com/200/200/sports/2"/>
  </div>
  
  <div class="left">
     <img src="http://lorempixel.com/200/200/sports/3"/>
  </div>
  
  <div class="right">
     <img src="http://lorempixel.com/200/200/sports/5"/>
  </div>
  
</div>