Bu düzensiz şekilli kenarlığı saf CSS ile nasıl oluşturabilirim (görüntü yok)?

Etkili bu oluşturmak için bir arka plan görüntüsü (veya herhangi bir görüntü tabanlı çözüm) kullanmaktan kaçınmaya çalışıyorum:

Not: kırmızı ok sadece söz konusu sınırı işaret ediyor. Ok cevabınıza dahil edilmemelidir.

Bu düzensiz şekilli kenarlığı saf CSS ile nasıl oluşturabilirim (görüntü yok)? Görüntüler kaçınılmazsa, en kısa ve okunabilir cevap kaldırılır ve kabul edilir.

CSS kullanabilirsiniz (bunun eski IE sürümlerinde çalışmayacağını unutmayın).

Örneğin, dikdörtgen ve iki üçgen gibi bazı şekilleri birleştirebilirsiniz. Bu jsfiddle bakın .

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

Ve CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

Burada çeşitli CSS şekilleri görebilirsiniz . Hepsi birden fazla div gerektirmiyorsa, bu yüzden meydan okuma daha koyu bir sınır uygulamak olacaktır.

Yisela'nın cevabı sağlam, ama bu alternatifi sunacağımı düşündüm: çokgen veya CSS şekilleri ve klip yolu ile bir görüntü URI'sini kullanma. İşte hızlı bir eğitim .

Bu yöntemin şu anda üçgen kenarlık numarasından daha az tarayıcıyla çalışacağını unutmayın. Bununla birlikte, daha karmaşık bir şekil kullanmak veya metninizi şekle sarmak istiyorsanız, bu yol olacaktır.

Bunun için sınırlı desteği olan başka bir yöntem de "CSS'ye gömülü SVG" dir. Bunu kendim denemedim ama fikir, nesne için css bildirimi içinde bir url olarak bir görüntü kaynağı sağlamak ve veri içeren düzgün bir kaçan url geçmek olmasıdır.

SVG düz metin / xml biçimidir. Örnek bir çokgen ( w3schools'tan ):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg> 

Örnek satır içi (katıştırılmış) SVG (basitleştirilmiş) (yığın akışından ):

url("data:image/svg+xml;utf8, <svg></svg>");

SVG verilerinin satır içi kullanım için düzgün bir şekilde "kaçması" gerektiğine dikkat edin, bu da yalnızca bir SVG dosyasını bağlamaktan daha az çekici hale getirir.

Yukarıdaki bağlantılı iş parçacığında yöntemin uygulanabilirliği hakkında bazı tartışmalar vardır. Beyaz dolgulu üçgen gibi basit bir şey katmanın, destek sağlandığında kolay bir karar olduğunu düşünüyorum. Karmaşık SVG formatındaki veriler satır içi yerine SVG dosyası olarak saklanmalıdır.

SVG dosyaları vektördür ve "borders" yönteminden farklı olarak yüzde olarak ölçeklendirilebilir. Ayrıca (şu anda) listelenen kırpma yolu yönteminden daha iyi (en azından satır içi olmayan) desteğe sahiptirler. Düz metin olan SVG, örneğin PHP veya diğer sunucu tarafı komut dosyaları kullanılarak anında yayınlanabilir.

Resimdeki mavi alanınız saydam bir png ve beyaz alan saydamsa, gölgeleri düşürmek için bu html'yi eklemeniz gerekir:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

Ve görüntü üzerinde bu css kullanın:

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

Bu mükemmel çapraz tarayıcı çözümüdür.