Статьи

Создание треугольных DIVs с тенью с помощью CSS

Октябрь 17, 2018

В этом посте я собираюсь объяснить, как можно добавить тень к элементу треугольной формы, используя только элементы HTML и чистый CSS. Вероятно, эту технику можно использовать для добавления тени к любой непрямоугольной фигуре ( если вы можете сделать это, вы можете добавить тень ), но я собираюсь использовать треугольники, потому что они кажутся наиболее популярными полигонами в наши дни. И я собираюсь использовать HTML и CSS, так что это кросс-браузер (в CSS-хитростях есть множество примеров о многоугольных, круглых и даже выполненных на заказ фигурах. Стоит прочитать).

В основном то, что я ищу, это:

(проверьте код в скрипке )

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

Основная структура

HTML состоит из двух основных элементов: один для изображения, другой для заголовка и треугольника (с классом наложения элементов ). Обратите внимание, что оверлей разделен еще на три деления, я собираюсь объяснить, почему мне нужно сделать это позже, но в основном у вас есть квадратный элемент, который содержит данные ( item-info ) и треугольник в верхней части для симуляции многоугольная форма (та, которая имеет класс многоугольников , не так много креативности в именах). Последние два элемента предназначены для тени, и поскольку в этом случае треугольник ориентирован вправо, я назвал классы polygon-shadow-top-left и polygon-shadow-bottom-right .

<div class="item">
    <div class="item-image">
        <img src="http://t.wallpaperweb.org/wallpaper/space/1920x1200/38133_1920x1200.jpg" />
    </div>
    <div class="item-overlay">
        <div class="item-info">
            <div class="title">Shuttle mission</div>
        </div>
        <div class="polygon-right"></div>
        <div class="polygon-shadow-top-right"></div>
        <div class="polygon-shadow-bottom-right"></div>
    </div>
</div>

Я не собираюсь охватывать все примененные стили, но знаю, что я использовал z-index, чтобы расположить изображение ниже треугольника. И элементы div внутри оверлея размещаются рядом друг с другом, используя абсолютное позиционирование (в будущем мы могли бы достичь того же результата, используя компоновку сетки CSS3 )

Теперь давайте посмотрим на стили, чтобы создать многоугольную форму.

Многоугольная форма

Для создания этой формы я использовал два элемента: квадратный элемент (как обычно), который содержит данные (если есть) и треугольный элемент. Эти два элемента, помещенные вместе, моделируют многоугольную форму:

/* The square */
.item .item-overlay .item-info{
    width: 140px;
    height: 100%;
    float: left;
    background-color: #005482;
}

/* The triangle */
.item .item-overlay .polygon-right{
    width: 0;
    height: 0;
    float: left;
    border-top: solid 70px transparent;
    border-bottom: solid 130px transparent;
    border-left: solid 20px #005482;
    position: relative;
    z-index: 2;
}

Обратите внимание, что ширина и высота установлены в 0 в треугольнике. Это потому, что границы заботятся об окончательной ширине и высоте элемента. Вы можете поиграть с этими значениями, чтобы изменить кончик треугольника, в этом случае ближе к вершине.

Чтобы изменить ориентацию треугольника, необходимо обновить значения границ. Например:

.polygon-left{
    border-top: solid 70px transparent;
    border-bottom: solid 130px transparent;
    border-left: solid 20px #005482;
}

.polygon-top{
    border-left: solid 70px transparent;
    border-right: solid 130px transparent;
    border-bottom: solid 20px #005482;        
}

.polygon-bottom{
    border-left: solid 70px transparent;
    border-right: solid 130px transparent;
    border-top: solid 20px #005482;   
}

Теперь, когда мы обсудили треугольники, пришло время тени.

Полигональная тень

Для этого мне нужно использовать два отдельных div. Я их стиль , используя ту же самую границу технику , как и раньше, но в этом случае я установил ширину . Причина проста: мне нужна точно такая же фигура, с тем же углом, но немного смещенная вправо (как на высоких каблуках). Г-индекс ниже , чем полигон, это расположить тень всегда ниже многоугольника.

.item .item-overlay .polygon-shadow-top-right{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 140px;
    width: 10px;
    border-right: solid 20px transparent;
    border-bottom: solid 70px rgba(0, 0, 0, 0.5);
}

.item .item-overlay .polygon-shadow-bottom-right{
    position: absolute;
    z-index: 1;
    top: 70px;
    left: 140px;
    width: 10px;
    border-right: solid 20px transparent;
    border-top: solid 130px rgba(0, 0, 0, 0.5);
}

Для других ориентаций вам необходимо изменить значения границ и ширины / высоты.

/* Left */
.polygon-shadow-top-left{
    width: 10px;
    border-left: solid 20px transparent;
    border-bottom: solid 130px rgba(0, 0, 0, 0.5);
}

.polygon-shadow-bottom-left{
    width: 10px;
    border-left: solid 20px transparent;
    border-top: solid 130px rgba(0, 0, 0, 0.5);
}

/* Top */
.polygon-shadow-left-top{
    height: 10px;
    border-top: solid 20px transparent;
    border-right: solid 70px rgba(0, 0, 0, 0.5);
}

.polygon-shadow-right-top{
    height: 10px;
    border-top: solid 20px transparent;
    border-left: solid 130px rgba(0, 0, 0, 0.5);        
}

/* Bottom */
.polygon-shadow-left-bottom{
    height: 10px;
    border-bottom: solid 20px transparent;
    border-right: solid 70px rgba(0, 0, 0, 0.5);    
}

.polygon-shadow-right-bottom{
    height: 10px;
    border-bottom: solid 20px transparent;
    border-left: solid 130px rgba(0, 0, 0, 0.5);    
}

49
Share: