Задать вопрос
@Wyse
css

Как правильно сверстать такую границу у блока?

У меня есть вариант через псевдоэлементы накинуть прозрачность
Может кто что предложит еще ?
655b8ceb8a644695122124.jpeg
  • Вопрос задан
  • 109 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
@ksnk
Немного переработал вариант от Ильи Бондаренко, зато с прозрачностью и котиками
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
ilyabond
@ilyabond
В яме даннинга крюгера
Мне кажется куда-то в эту сторону:
https://codesandbox.io/s/border-gradient-ppmtgr?fi...
Ответ написан
5 комментариев
5 комментариев
@kelvin57
Вот вариант, ещё и анимацию можно добавить)))
Demo: https://jsfiddle.net/L3f2g5ty/



Код

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="cards">
      <div class="card">
        <h1>Далеко-далеко за словесными горами.</h1>
        <span
          >Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты.</span
        >
      </div>
    </div>

    <style>
      body {
        color: #fff;
        background: #00010e;
        display: flex;
        justify-content: center;
      }
      * {
        margin: 0;
        padding: 0;
      }

      .cards {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        justify-content: center;
      }

      .card {
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding: 70px;
        border: 2px solid rgb(65, 66, 50);
        position: relative;
      }
      .card h1,
      .card span {
        z-index: 1;
      }
      .card::after,
      .card::before {
        display: block;
        content: "";
        width: 45%;
        aspect-ratio: 1/1;
        border-radius: 20% 100% 20%;
        transform: rotate(-20deg);
        position: absolute;
        background: #00010e;
        box-shadow: 0 15px 50px 30px #00010e;
        animation: 10s rotate infinite alternate;
      }
      @keyframes rotate {
        from {
          transform: rotate(-20deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .card::after {
        right: 0;
        top: -65%;
        right: -10%;
      }
      .card::before {
        width: 30%;
        bottom: -50%;
        left: 20%;
      }
    </style>
  </body>
</html>

Ответ написан
Комментировать
Комментировать
@ratatujef
background-image еще можно
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Переписать бота тг с питона на Go по ветке из гита
03 мая 2024, в 02:03
20000 руб./за проект
Решить контрольную по линейной алгебре 3 мая в 10:00
03 мая 2024, в 01:14
3000 руб./за проект
Установщик на INNO SETUP
03 мая 2024, в 00:45
1000 руб./за проект
Ещё заказы