Удалить тень коробки с левой стороны

Я создаю пользовательский переключатель для проекта дизайна муравья, и я изо всех сил пытаюсь сохранить три стороны (т.е. верхнюю, правую, левую) тени окна (т.е. 2px 2px 8px rgba(0, 0, 0, 0,15) ) и полностью удалите box-shadow/blur с левой стороны. Моя последняя попытка ниже. Есть предположения?

JSX:

<span onClick={this.toggleCollapse} className="ant-layout-sider-zero-width-trigger">
  {collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />}
</span>

МЕНЬШЕ:

.ant-layout-sider-zero-width-trigger {
  background: #fff;
  color: #000000a6;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15), inset -2px 0px 0px #fff;

  &:hover {
    background: #fff;
  }
}

Кстати, я видел похожие вопросы в стеке, но ни один из них не работал у меня после долгих экспериментов.


css antd box-shadow
person lgants    schedule 31.03.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Идея состоит в том, чтобы использовать другой контейнер и полагаться на некоторое переполнение:

.container {
  display:inline-block;
  padding:5px 5px 5px 0;
  overflow:hidden;
}

.box {
  width:200px;
  height:50px;
  background: #fff;
  color: #000000a6;
  box-shadow: 
    2px 2px 8px rgba(0, 0, 0, 0.15), 
    inset -2px 0px 0px #fff;
}
<div class="container">
<div class="box">
</div>
</div>

person Temani Afif    schedule 31.03.2018

arrow_upward
0
arrow_downward

Вы можете увеличить смещение тени и уменьшить ее размер:

html {
  background: white;
}

body {
  padding: 2em;
  margin: 2em;
  background: yellow;
  box-shadow: 4px 4px 8px -4px, inset -2px 0px 0px #fff;
}

person G-Cyrillus    schedule 31.03.2018
comment
но вы хотите иметь точно такую ​​же тень ... я думаю, что идея в том, чтобы сделать аккуратный разрез тени - person Temani Afif; 02.04.2018
comment
@TemaniAfif Может быть, я неправильно понял вопрос. Тень использует размер своего контейнера, если смещение составляет 2 пикселя, но при распылении на 8 пикселей со стороны смещения будет видно 6 пикселей, не так ли? , уменьшите его (смещение минус брызги), и он не будет переполнять эти 6 пикселей. Не нужно его отрезать от лишнего родительского контейнера ;) - person G-Cyrillus; 02.04.2018