Как склеить углы двух разных блоков?

Ссылка скопирована
CSS HTML PHP
9 января 2026 1 ответ

Доброго дня.
Может кто подскажет, как можно вот так склеить углы двух блоков, чтобы у них была общая фиолетовая тень

Как склеить углы двух разных блоков?

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

Какая тень? Просто рамки у блоков

snippet

  • Сергей delphinpro, Мне нужно сделать так чтобы это как один блок был, чтобы углы плавно склеивались. Как на картинке у белых блоков по сторонам от картинок
  • Сергей delphinpro, чтобы получилось вот так

    Как склеить углы двух разных блоков?

  • daleney, Всё еще не вижу вашей проблемы..
    snippet
  • daleney, это нифига не естественное поведение. Можно что-то шаманить с наложением 10 блоков с разным краями, но по сути тебе придётся писать кастомным svg фильтр, примерно такого содержания:
    feGaussianBlur с размытием настолько, насколько нужны закругления x2.
    feComponentTransfer table 0 1 по альфе, чтобы вернуть краям резкость.
    feMerge с исходником чтоб вернуть резкость содержимому.
    feDropShadow чтобы нарисовать общую тень.
  • Aetae, спасибо за наводку

    • Ответы:

    По рисунку тяжело понять, но предположу, что вам должен подойти варинат

    box-shadow: -3px -4px 0 rgb(148, 126, 194);   border-radius: 5px;

    box-shadow: -3px -4px 0 rgb(148, 126, 194); border-radius: 5px;

    https://developer.mozilla.org/ru/docs/Web/CSS/box-...

    Что такое "склеить углы"?

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

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

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

    Для склеивания углов двух разных блоков можно использовать псевдоэлементы :before и :after в CSS. Это позволит создать дополнительные элементы, которые будут располагаться перед и после основного блока и помогут визуально склеить углы.

    Пример кода на CSS для склеивания углов двух разных блоков:

    .block1 {
  position: relative;
  background-color: #f0f0f0;
  padding: 20px;
}
 
.block1:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #f0f0f0;
}
 
.block1:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #f0f0f0;
}
 
.block2 {
  position: relative;
  background-color: #ccc;
  padding: 20px;
}
 
.block2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 20px solid #ccc;
  border-right: 20px solid transparent;
}
 
.block2:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 20px solid #ccc;
  border-left: 20px solid transparent;
}

    .block1 { position: relative; background-color: #f0f0f0; padding: 20px; } .block1:before { content: ''; position: absolute; top: 0; left: 0; border-top: 20px solid transparent; border-right: 20px solid #f0f0f0; } .block1:after { content: ''; position: absolute; bottom: 0; right: 0; border-bottom: 20px solid transparent; border-left: 20px solid #f0f0f0; } .block2 { position: relative; background-color: #ccc; padding: 20px; } .block2:before { content: ''; position: absolute; top: 0; left: 0; border-top: 20px solid #ccc; border-right: 20px solid transparent; } .block2:after { content: ''; position: absolute; bottom: 0; right: 0; border-bottom: 20px solid #ccc; border-left: 20px solid transparent; }

    В данном примере мы создаем два блока (block1 и block2) с разными цветами фона и используем псевдоэлементы :before и :after для создания треугольных участков, которые будут "склеивать" углы блоков. Настройки border-top, border-right, border-bottom и border-left определяют форму и цвет треугольных участков.

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

    Другие ответы (0)

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

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

    комментарий

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

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

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ