Нарисуйте затененный треугольник с помощью CSS

CSS

1. Идеи

Как нарисовать затененный треугольник с помощью CSS? Какая-то детская обувь сказала, разве это не просто? В интернете много решений, но на самом деле большинство из них не идеальны, и есть некоторые проблемы

Предположим, мы делаем направленную вниз треугольную стрелку Существует примерно два распространенных метода

  1. С помощью управления границами граница слева и граница справа могут быть установлены прозрачными, а граница сверху может быть задана заранее заданным цветом.
  2. Поверните поле путем преобразования

2. Дизайн

Сначала нарисуйте треугольник

在这里插入图片描述
HTML-структура

<body>
    <div class="box"></div>
</body>

css-стиль

.box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #ff8605;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.box::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 45px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
}

Недостаток очевиден, мы не можем задать тень по box-shadow, тень будет коробом

2.1 Пограничный метод

Если требования к тени не так высоки, мы можем определить еще один треугольник элемента псевдокласса, простоего цвет похож на цвет тени, возьми это影子三角形Покройте нижнюю часть нашего исходного треугольника.

.box::before {
    position: absolute;
    bottom: -10px;
    left: 45px;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0, 0, 0, .1);
}

как показано на рисунке

在这里插入图片描述

Преимущество в том, что совместимость лучше, и кажется, что требования недостаточно строгие.

Но как строгий фронтенд-инженер!Такого подхода мы все равно терпеть не можем

2.2 Метод фильтрации

Правильная поза заключается в использованииdrop-shadow() в фильтре

в фильтреdrop-shadowАтрибут является реальной проекцией, он проецирует только тень реального изображения.

box-shadowБудет проецироваться только тень блочной модели

.box::after {
    position: absolute;
    bottom: -9px;
    left: 45px;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

Он отлично достигает эффекта, но недостатком является то, что совместимость может быть плохой.

совместимость свойства фильтра

(Метод фильтрации предложен детской обувью в области комментариев, спасибо~~)

2.3 метод преобразования

Идея этого метода, тень треугольника использует тень моделей коробки Мы не рисуем треугольник, просто нарисуйте квадратный ящик, а затем поверните его на 45 градусов через атрибут трансформации.

.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 2px rgba(0, 0, 0, .2);
}

在这里插入图片描述

Кажется, мы достигли результатов, которые мы хотим, но на самом деле есть проблема, но потому что наша тень недостаточно велика, она выглядит не очевидно на картинке.

когда мы ставимbox-shadowКогда область тени увеличивается, мы находим проблему

在这里插入图片描述

Коробка торчит, как исправить?

Давайте определим еще одну коробку того же цвета, что и контейнер, и закроем верхнюю часть.

/* transform方法 */
.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
}
.box::after {
    position: absolute;
    bottom: 0px;
    left: 40px;
    content: '';
    width: 20px;
    height: 20px;
    background: #ff8605;
}

Обратите внимание, что треугольник должен использоватьсяbeforeПо определению переопределенное поле должно использоваться сafterопределить так, чтобы поле могло покрыть треугольник

Осознайте эффект:

在这里插入图片描述

Конечно, этот метод может повлиять на содержимое коробки.

3. Окончательный код решения

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>CSS实现带阴影效果的三角形</title>
        <style>
            .box {
                position: relative;
                width: 200px;
                height: 100px;
                background: #ff8605;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            }
            
            /* border法 */
            .box::before {
                position: absolute;
                bottom: -10px;
                left: 45px;
                content: '';
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid rgba(0, 0, 0, .1);
            }
            
            /* drop-shadow */
            .box::after {
                position: absolute;
                bottom: -9px;
                left: 45px;
                content: '';
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #ff8605;
                filter: drop-shadow(1px 3px 1px rgba(0, 0, 0, .2));
            }
            
            /* tranform */
            .box::before {
                position: absolute;
                bottom: -5px;
                left: 45px;
                content: '';
                width: 10px;
                height: 10px;
                background: #ff8605;
                transform: rotate(135deg);
                box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
            }
            
            .box::after {
                position: absolute;
                bottom: 0px;
                left: 40px;
                content: '';
                width: 20px;
                height: 20px;
                background: #ff8605;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

Если у вас есть лучший способ добиться этого, пожалуйста, оставьте мне сообщение

Категории