CSS kutusu üçgeni etrafında gölge kutusu

Question

Basit html ve css kullanarak alt gölge içeren bir üçgen oluşturmam gerekiyor. Başka bir stackoverflow sorusu tarafından cevaplandırılan, ben sınırlanmış sınırları ile üçgen oluşturmayı başardı. Temelde ben çok geniş bir sınır ve geniş şeffaf kenarlıklı yakındaki tarafı ile bir kutu 1 tarafını oluşturmak:

div.triangle { 
    border-bottom : 60px solid transparent; 
    border-left : 60px solid black; 
} 

harika çalışıyor, ancak ben gölge kapsayan meydanın çevresinde giden bir kutu gölge uygulamak çalıştığınızda ... değil üçgen:

div.triangle { 
    border-bottom : 60px solid transparent; 
    border-left : 60px solid black; 
    -webkit-box-shadow: 0 0 10px black; 
} 

nasıl gölge düşen sadece css/html kullanarak bir üçgen alabilirim?

Answer 1

İmkansız gibi görünüyor. Kesinlikle bir hayal kullanarak çok daha kolay bir çözümdür. Üçgen gibi bir şey yaptım :) http://jsfiddle.net/5dw8M/109/. Üzgünüz, gönderilerinizden bir yorum bırakamaz. Birisi için bir ilham kaynağı olarak hizmet eder;

Answer 2

Benzer mülk ile başka bir div koymak ve pozisyonlar ile oynamak hakkında ne dersiniz? http://jsfiddle.net/eveevans/JWGTw/

Answer 3

<canvas> bir PNG yedeklemesi ile bir seçenek olabilir mi?

Demo: jsfiddle.net/Marcel/3dbzm/1

Answer 4

nihayet CSS konumlandırma ile merkezi kapalı, bunu beyazlatmak, o üçgenin bir kopyasını oluşturun css kullanarak bunu bir negatif z-endeksi değer vermek ve.

div.triangle { 
z-index:-1; 
position:relative; 
bottom:-16px; 
right:-16px; 
} 

Answer 5

Bir bir meydana 45 derece döndürmek için "dönüştürmek" özelliğini kullanın ve yarısını gizlemek, ancak bir yedeği gerekir böylece tüm tarayıcılar, bunu destekleyebilir.

.triangle-with-shadow { 
    width: 100px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5); 
} 
.triangle-with-shadow:after { 
    content: ""; 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: #999; 
    transform: rotate(45deg); 
    -ms-transform:rotate(45deg); /* IE 9 */ 
    -moz-transform:rotate(45deg); /* Firefox */ 
    -webkit-transform:rotate(45deg); /* Safari and Chrome */ 
    -o-transform:rotate(45deg); /* Opera */ 
    top: 25px; 
    left: 25px; 
    box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5); 
}​ 

Demo on jsfiddle.

modifikasyonlarla this CSS Tricks page kaldırılır. Muhtemelen en iyi seçenek filter kullanıyor

Answer 6

:

filter: drop-shadow(0 0 10px black);