Görüntü arka planını bir CSS Üçgeni üzerine yerleştirme

Question

Üçgen oluşturmak için CSS kenarlıkları kullanan bir div üzerine bir arka plan resmi koymaya çalışıyorum. Bu benim şu andaki çabalarım. Düz renkler ile iyi çalışıyor, ancak görüntülerde söz konusu olduğunda bir kayıp yaşıyorum.

HTML

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div> 

CSS

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
} 

jsfiddle: http://jsfiddle.net/aRS5g/9/ böylece, o bakıyor Fiddle JS i yapacak nasıl

gri bölümde o da benim seçim bir görüntü arka planı, # 111, #eee, vb. gibi renkleri kullanmak zorunda kalmak yerine,

Answer 1

CSS'deki bir üçgen, bir öğenin kenarlığının kısımlarını görüntüleyerek oluşturulan bir kırılmadır. Bu nedenle, gördüğünüz üçgen bir öğenin kendisi değil, bir CSS sınırıdır.

Kenarlık, normal CSS background-image stili kullanılarak biçimlendirilemez; bu, CSS üçgenlerinin sınırlamalarını görmeye başladığınız yerdir ve neden bu gerçekten iyi bir teknikten ziyade bir kesmek gibidir.

Sizin için çalışabilecek bir CSS çözümü vardır: border-image.

border-image, beklediğiniz şeyi yapan bir CSS stilidir; Bir görüntüyü bir elemanın kenarına koyar. CSS üçgeni bir sınır olduğundan, üçgenin üzerine bir arka plan resmi koymak için kullanabilirsiniz. Bununla birlikte, işler karmaşıklaşmaktadır. border-image stili, üçgenler değil kenarlıkları stil için tasarlanmıştır; köşeleri ve yanları şekillendirmek ve görüntüleri uygun şekilde çekmek için özelliklere sahiptir. Bunu bir üçgenle denemedim, ancak kullanmayı zorlaştıran bazı tuhaflıklar olabileceğini tahmin edebilirim. Ama bunu bir vermek için çekinmeyin.

border-image ile ilgili diğer sorun tarayıcı desteği. Nispeten yeni bir CSS stili ve IE'nin tüm sürümleri de dahil olmak üzere pek çok mevcut tarayıcıda tamamen desteklenmiyor. Bunun için tam tarayıcı destek tablosunu CanIUse'da görebilirsiniz.

Tüm bu sorunlardan dolayı, tarayıcıda şekil çizmek istiyorsanız, CSS kesmelerini düşürmeyi ve SVG veya Canvas kullanmayı düşünmelisiniz. Bunlar çoğu tarayıcıda iyi bir şekilde desteklenir ve açıkça isteyebileceğiniz tüm çizim özelliklerini desteklemektedir.

CSS üçgenleri, zaman zaman ok şeklini oluşturmak için harikadır, ancak CSS kodunuza daha fazla kesmek istemekten ziyade, uygun grafikleri kullanmanın çok daha kolay olduğundan daha karmaşık bir şey için.

Answer 2

div bir arka plan görüntüsü sen

background-image:url("your image url here"); 

Yani sınıf .triangle bu

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
} 

Ayrıca arka plan tekrarı belirlesin arka plan görseli bağlı gibi görünecektir css kuralını eklemelisiniz. repeat-x, görüntüyü tekrar tekrar sağa ve sola (x ekseni) getirerek tekrar tekrar görüntüyü yukarı ve aşağı (y ekseni) tekrarlar. Görüntüyü tekrarlamak istemezseniz, sadece no-repeat kullanın, ancak o zaman sabit bir yükseklik ve genişlik kullanmanızı tavsiye ederim.