Box Shadow''a güçlü alternatif: Drop Shadow

<div class="ucgen"></div>

.ucgen {
	border-color: transparent transparent #1976D2 transparent;
	border-style: solid;
	border-width: 100px 100px 100px 100px;
	height: 0px;
	width: 0px;
}
```html
 
Bu kodların çıktısı şu şekilde olacaktır.
 
<div
	style={{
		borderColor: "transparent transparent #1976D2 transparent",
		borderStyle: "solid",
		borderWidth: "100px 100px 100px 100px",
		height: "0px",
		width: "0px"
	}}
/>
 
Aslında bir üçgen değil kare yaptık. Fakat 3 tarafının kenar rengini saydam (_transparent_) yaptığımız için sadece tek tarafı görünür oldu, böylece üçgen elde etmiş olduk. Ardından bu üçgenimize box-shadow ile gölge vermek istediğimizde, şu şekilde bir sonuç alırız.
 
```css
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
```html
 
<div
	style={{
		borderColor: "transparent transparent #1976D2 transparent",
		borderStyle: "solid",
		borderWidth: "100px 100px 100px 100px",
		boxShadow: "0px 0px 10px rgba(0,0,0,.5)",
		height: "0px",
		margin: "15px 0",
		width: "0px"
	}}
/>
 
Bunun nedeni, bahsettiğim gibi aslında bir kare yapmış olmamız; CSS kodları, kareye göre gölge belirliyor.
 
Peki bu sorunu nasıl çözebiliriz?
 
İmdadımıza CSS'in **filter** özelliği yetişiyor. **filter: drop-shadow** ile gölge verdiğimiz zaman görünmeyen yerleri baz almayarak sadece görünür kısma gölge vermiş olduk.
 
```css
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));