Question: I have this triangle in CSS:

```css
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #007bff transparent transparent transparent;
}
```

```html
<div class="triangle"></div>
```

How can I apply a 1px shadow on the hypotenuse line?

Answer: 
Since `box-shadow` won't work, you have to apply a drop shadow filter on the triangle:

```css
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #007bff transparent transparent transparent;
  -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
}
```

```html
<div class="triangle"></div>
```
Create a `polygon` in an `svg`, then apply a [`drop-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow) filter.

```css
.triangle {
  width: 200px;
  color: #007bff;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
}
```

```html
<svg class="triangle" viewBox="0 0 100 100">
  <polygon points="0,0 100,0 0,100" fill="currentColor" />
</svg>
```

Try to use semantic, meaningful HTML elements instead of relying purely on CSS for shapes.