Избегайте перекрывающихся теней на неправильных формах CSS

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

См. изображение всплывающего окна ниже:

введите здесь описание изображения

... и код для создания:

.popover-test {
  background-color: #fff;
  border: 1px solid #929292;
  box-shadow: 0 0 10px 1px #929292;
  height: 100px;
  position: relative;
  width: 200px;

  &::before {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content: "";
    height: 20px;
    left: 100px;
    position: absolute;
    width: 50px;
  }
}

Как я могу сохранить тень вокруг границы неправильной формы, но удалить ее из основания вкладки вверху?


html css dropshadow
person Nicholas Pappas    schedule 27.04.2015    source источник
comment
Как насчет HTML или даже рабочего примера проблемы на веб-сайте, таком как jsfiddle.net?   -  person Arbel    schedule 28.04.2015
comment
см. здесь stackoverflow.com/a/29852515/1926369   -  person vals    schedule 28.04.2015

Ответы (1)


arrow_upward
3
arrow_downward

Оберните вкладку чем-нибудь с помощью z-index:1;, а затем вы можете перемещать до/после сзади и сверху вот так. Вы получите некоторые проблемы, но ничего, что нельзя было бы исправить с помощью некоторых базовых CSS.

https://jsfiddle.net/ptb7n90w/1/

введите здесь описание изображения

.wrapper {
    z-index:1;
}
.popover-test {
    background-color: #fff;
    border: 1px solid #929292;
    box-shadow: 0 0 10px 1px #929292;
    height: 100px;
    position: relative;
    width: 200px;
}
.popover-test::before {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    top: -10px;
    content:"";
    height: 20px;
    left: 101px;
    width: 50px;
    position: absolute;
    z-index:1;
}
.popover-test::after {
    background-color: #fff;
    border: 1px solid #929292;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 10px 1px #929292;
    top: -20px;
    content:"";
    height: 20px;
    left: 100px;
    width: 50px;
    position: absolute;
    z-index:-1;
}
person Ed Knowles    schedule 27.04.2015