CSS Shape或SVG mask，这是响应式设计的最佳方法？

Question

Hy！

我想实现这个目标：

但我不能......你能给我一个跟踪或教程吗？ 我试过这个模型，但没有响应。 Here is my JsFiddle

<div class="block">
   <div></div>
</div>

CSS：

.block {
  position: relative;
}
.block > div {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
  border: 7em solid #1142AA;
  border-right: 7em solid transparent;
  left: 0em;
 top: 0em;
}

谢谢; - ）

Answer 1

我明白了！

我的回答是基于Bootstrap框架和剪辑路径属性。该解决方案具有响应性。

JSFiddle

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-8 text-block">
            <p>Hi omnes lingua, institutis, legibus inter se differunt. Non equidem invideo, miror magis posuere velit aliquet. Quo usque tandem abutere, Catilina, patientia nostra? Nihil hic munitissimus habendi senatus locus, nihil horum?</p>
        </div>
          <div class="col-xs-4 img-block">
          </div>
    </div>    
</div>

CSS

.container{
    background:url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/symphony.png') repeat;
}
.text-block{
    padding:20px;
    height:200px;
}
.img-block{
    background:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=400%C3%97200&w=400&h=200') no-repeat center fixed ;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
    }

JS

$.fn.heightBlocks = function(){
    return this.outerHeight(
        Math.max.apply(this,
            $(this).map(function(i,e){
                return $(e).outerHeight()
            }).get()
        )
    )
};

$('.text-block, .img-block').heightBlocks();

你怎么看？