Можно ли сделать трехсекционный разделитель () с помощью CSS?

На чтение 4 мин Опубликовано 27.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Пример CSS
Пример React компонента
Пояснения к коду:
Советы

Вопрос или проблема

Я пытаюсь воспроизвести разделительную панель меню Nintendo Wii с помощью CSS на React JS и Tailwind (синюю, извините за плохое качество изображения):

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

Я пытался разделить панель на три части. Сначала левую часть, затем среднюю и затем правую часть, используя радиус границы и тень коробки, но моя основная проблема в том, что радиус сужается по краям, и когда я комбинирую его с другой панелью, края не сливаются. Вот код левой и средней части (я не стал делать правую часть) и часть часов и даты:

.mm-left-box {
    width: calc(50% - 8rem);
    height: 100px;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
    transform: translateX(-17rem);
    position: absolute;
    border-bottom-right-radius: 50%;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.mm-left-bar {
    border-top: 4px solid #00c4ff;
    border-radius: 50px;
    box-shadow: 0 -2px #00c4ff;
}

.mm-bar {
    border-top: none;
    border-bottom: 6px solid #00c4ff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

<footer className="relative">
    {/* Левая линия */}
    <div className="left-0 top-0">
        <div className="mm-left-box mm-left-bar"></div>
    </div>

    {/* Текущая дата и время и средняя линия */}
    <div className="flex justify-center items-center">
        <div className="pb-16 relative z-10 bg-gray-300">
            <div className="mm-bar mm-striped-bg bg-white font-mono pb-3 text-gray-400 text-5xl px-80">
                {formattedTime}
            </div>
            <div className="font-rodin text-4xl text-gray-500 text-center ">
                <strong>{currentDate}</strong>
            </div>
        </div>
    </div>
</footer>

Ответ или решение

Да, создать трехчастную разделительную линию, как в меню Nintendo Wii, с помощью CSS возможно. Это можно сделать, используя свойства CSS, такие как border-radius, box-shadow, и настройку размеров для создания визуального эффекта. Я предложу полный рабочий пример, используя React и Tailwind CSS.

Пример CSS

.mm-left-box {
    width: calc(50% - 8rem);
    height: 100px;
    background-color: rgba(209, 213, 219, 0.5);
    transform: translateX(-17rem);
    position: absolute;
    border-bottom-right-radius: 50%;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.mm-left-bar {
    border-top: 4px solid #00c4ff;
    border-radius: 50px;
    box-shadow: 0 -2px #00c4ff;
}

.mm-bar {
    background-color: #fff;
    border-top: none;
    border-bottom: 6px solid #00c4ff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 3rem; /* Adjust this value based on content */
}

.mm-right-bar {
    border-top: 4px solid #00c4ff;
    border-radius: 50px;
    box-shadow: 0 2px #00c4ff;
    position: absolute; /* Выравнивание правой части */
    height: 100px; /* Высота правой части */
    right: 0;
    bottom: 0;
    border-top-right-radius: 50% /* Чтобы завершить форму */;
}

Пример React компонента

import React from 'react';

const MyMenuBar = ({ formattedTime, currentDate }) => {
    return (
        <footer className="relative">
            {/* Левая часть */}
            <div className="left-0 top-0">
                <div className="mm-left-box mm-left-bar"></div>
            </div>

            {/* Текущая дата и время с центральной линией */}
            <div className="flex justify-center items-center">
                <div className="pb-16 relative z-10 bg-gray-300">
                    <div className="mm-bar bg-white font-mono text-gray-400 text-5xl">
                        {formattedTime}
                    </div>
                    <div className="font-rodin text-4xl text-gray-500 text-center">
                        <strong>{currentDate}</strong>
                    </div>
                    {/* Правая линия */}
                    <div className="mm-right-bar"></div>
                </div>
            </div>
        </footer>
    );
};

export default MyMenuBar;

Пояснения к коду:

Левая часть создается с помощью блока mm-left-box, который имеет снизу скругленный угол. Цвет фона можно настроить по вашему желанию.
Центральная часть (события и время) представляет собой компонент, который включает дополнительную подложку, чтобы не соприкасаться с верхней и нижней линиями.
Правая часть имеет аналогичное оформление, что и левая, и позиционируется абсолютно для создания иллюзии связанного разделения.

Советы

Ширина и высота: Вы можете настроить ширину и высоту всех частей (левой, центральной и правой) по своему усмотрению для получения лучшего визуального эффекта.
Отступы: Используйте значения отступов (padding) для управления размещением текста внутри центральной части.
Настройка цветовой схемы: Убедитесь, что цвета, которые вы используете, соответствуют вашему проекту.

Таким образом, используя предложенный выше код, вы сможете эффективно создать трехчастную разделительную линию в стиле меню Nintendo Wii с использованием React и Tailwind CSS.