CODEWITHSUNDEEP
cssantdbox-shadow
lgants
lgants

Reputation: 3835

Remove Box Shadow from Left Side

I'm creating a custom sider toggle for an ant design project and I'm struggling to preserve three sides (i.e top, right, left) of the box-shadow (i.e. 2px 2px 8px rgba(0, 0, 0, 0.15)) and remove the box-shadow/blur entirely from the left side. My most recent attempt is below. Any thoughts?

JSX:

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

LESS:

.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;
  }
}

btw I've seen similar questions on Stack but none worked for me after much experimentation.

Upvotes: 1

Views: 5170

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

You could increase the offset of the shadow and reduce its size:

html {
  background: white;
}

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

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272648

An idea is to use another container and rely on some overflow:

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

Upvotes: 1

Related Questions