html - CSS:剪刀式图像布局

Question

这是PNG，使用PS:

对于图像:

看，它是一种梯形，一边垂直，另一边倾斜。

如何在 html/css 中制作此布局，以便将转发到此 div 的任何图像始终显示在梯形内，并创建此精美的 ui。

如何在 HTML/CSS 中创建这种形状？ 接受答案后的代码:

<div class="scissor"><img src="1.png" style="width:200px"></div>

和CSS:

.scissor{       
    width: 300px;
    height: 150px;
    background: #FF6100;
    position: relative;
}
.scissor:after{
    content: '';
    position: absolute; top: 100%; left: 0;
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-right: 300px solid transparent;  
    display: block; 

}
span{
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 10px solid #fff;
    border-radius: 50%;
    position: absolute; top: 40%; left: 50%;
    z-index: 1;
    transform: translateX(-50%);
}

Answer 1

使用伪元素 - :before 或 :after

div{       
    width: 300px;
    height: 300px;
    background: #FF6100 url('http://www.hybworks.co.uk/wp-content/uploads/2015/05/los-angeles-auto-repair-300x300.jpg') no-repeat 0 0;
    position: relative;
}
div:after{
    content: '';
    position: absolute; bottom: 0px; left: 0;
    width: 0;
    height: 0;
    border-top: 150px solid transparent; 
    border-right: 300px solid #fff;  
    display: block; 
}
span{
    display: inline-block;
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    font-size: 60px;
    font-family: 'segoe ui';
    color: #fff;
    border: 10px solid #fff;
    border-radius: 50%;
    position: absolute; top: 10%; left: 50%;
    z-index: 1;
    transform: translateX(-50%);
}

<div>
    <span>D</span>
</div>

示例 2 - 使用 svg

<svg width="300" height="200">
  <polyline points="10, 10 300, 10 300, 100 10, 200 10, 100 10, 10" stroke-width="1" stroke="rgb(255,97,0)" fill="rgb(255,97,0)">
</svg>