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

Ссылка скопирована
CSS HTML JavaScript
1 ответ

У меня есть вариант через псевдоэлементы накинуть прозрачность
Может кто что предложит еще ?

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

Дополнительно:

Может кто что предложит еще ?

Не хотите псевдо, рисуйте градиентами

Немного переработал вариант от Ильи Бондаренко, зато с прозрачностью и котиками
snippet

Ответы:

Мне кажется куда-то в эту сторону:
https://codesandbox.io/s/border-gradient-ppmtgr?fi...

  • Лучше кодпен использовать вместо кодсандбох. Тут и поддержка его есть snippet
  • ksnk, а возможно как то сделать прозрачный фон и оставить только полосы ?
  • Danya Wyse, Спрашивай автора ответа, я просто вывел его вариант в более удобной для этого сайта форме.
    imho,
    Нет, в таком виде это невозможно. Тут бякграунд строится как 2 элемента, в нижнем
    на золотом фоне рисуется черная полоса, повернутая на 150%, в верхнем, поверх этой картинки рисуется черный прямоугольник с уменшеными на 5px габаритами. Так что прозрачность так не получить.
    Вероятно, можно svg нарисовать и поставить фоном, растянутым по всей картинке.
  • Danya Wyse, Хотя, возможно и с градиентами. Вот только резать нужно не отдельным слоем бякграунлда, а clip-rect. Ну и бякграунд будет отдельным дивом внутри. Сделано корявенько, но выглядит, вроде, как надо. snippet
  • ksnk, вы просто гений. Я столько времени потратил на поиск решения. Спасибо огромное. В комменты можете отписать, отмечу решением

Вот вариант, ещё и анимацию можно добавить)))
Demo: https://jsfiddle.net/L3f2g5ty/

snippet

Код

<!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>

<!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>

background-image еще можно

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Анна SEO Ответ

Для создания границы вокруг блока веб-страницы существует несколько способов. Один из самых распространенных и простых способов - использовать CSS.

Для того чтобы создать границу вокруг блока с помощью CSS, вам нужно создать класс или идентификатор и применить к нему свойства border. Например, чтобы создать границу вокруг блока с толщиной 1px и цветом #000 (черный), вы можете использовать следующий CSS код:

```php


    .border {

        border: 1px solid #000;

    }


```


Затем примените этот класс к вашему блоку в HTML:


```php



    



```


Этот код создаст границу вокруг вашего блока с толщиной 1px и черным цветом.


Если вы хотите управлять другими свойствами границы, такими как стиль (solid, dashed, dotted и т. д.), радиус скругления углов (border-radius) или прозрачность (opacity), вы можете добавить дополнительные свойства в класс .border.


Например, чтобы создать пунктирную границу вокруг блока с радиусом скругления углов 5px и прозрачностью 0.5, вы можете использовать следующий CSS код:


```php


    .border {

        border: 1px dotted #000;

        border-radius: 5px;

        opacity: 0.5;

    }


```


Примените этот класс к вашему блоку в HTML, как показано выше.


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

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ