ボックス内のCSSの三角形

Question

それを正しく説明する方法がわかりません。ここで、私が作りたいものがあるこのスクリーンショットをチェックしてください。私のデザイナーはこれを私にくれました。解決策が見つからない場合は、イメージとコードを使用します。 CSS3でこれを行うことは可能ですか？

Here is the image

そのボックス内の三角形を参照してください？私はこれをしたい。ありがとうございました！

Answer 1

この効果を得るために境界線をクリエイティブに使用すると、次のサンプルで画像が害されることはなく、要素自体に矢印の位置を設定することもできます。

HTML

<div class="top"> 
    <span class="arrow" style="left:40%"></span> 
</div> 

CSS

.top { 
    background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg); 
    background-size:cover; 
    width:300px; 
    height:300px; 
    border:1px solid #888; 
    position:relative; 
    overflow:hidden; 
} 
.arrow { 
    border:30px solid #aaa; 
    border-bottom:none; 
    border-color:transparent #aaa transparent #aaa; 
    position:absolute; 
    left:0; 
    bottom:0; 
} 
.arrow:before, .arrow:after { 
    content:''; 
    position:absolute; 
    width:5000px; 
    bottom:0; 
    height:30px; 
    background:#aaa; 
} 
.arrow:before { 
    right:30px; 
} 
.arrow:after { 
    left:30px; 
} 

Working JSfiddle sample。

Or the full integrated sample here。