2

body {
  background: #eee;
}

#box {
  margin: 50px;
  background: white;
  width: 200px;
  height: 100px;
  box-shadow: 0 0 1px gray;
}

#pointer{
  position: absolute;
  width: 0;
  top: 10px;
  left: 75px;
  border: 20px solid transparent;
  border-bottom-color: white;
  }
<div id="box"></div>
<div id="pointer"></div>

1 ответ 1

2

box-shadow может рисоваться только на границе "бокса", это свойство никак не заставить считать непрозрачную часть границы краем элемента. Однако можно воспользоваться трансформацией поворота. Так как тень рисуется подо всем квадратом, то приходится использовать два псевдоэлемента: один снизу для тени, другой сверху для скрытия границы.

body {
  background: #eee;
}

#box {
  margin: 50px;
  background: white;
  width: 200px;
  height: 100px;
  position: relative;
  box-shadow: 0 0 5px gray;
  border-radius: 10px;
}

#box::before, #box::after {
  display: block;
  content: " ";
  position: absolute;
  width: 40px;
  height: 40px;
  background: white;
  top: -15px;
  left: 25px;
  transform: rotate(45deg);
}

#box::before {
  z-index: -1;
  box-shadow: 0 0 5px gray;
}

#box::after {
  z-index: 1;
}
<div id="box"></div>

Как вариант, если вам хватает однопиксельной границы, можно аналогично наложить два элемента "хвостика" диалога со смещением вверх на 1 пиксель, чтобы создался эффект границы.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.