Unable to eliminate the overlapping box-shadow

Question

Unable to eliminate the overlapping box-shadow

Specifically, I am utilizing polymer paper-shadow for my project.

I am attempting to eliminate two sides of a paper-shadow box in order to create a basic arrow box, but I am facing difficulties in achieving this. Removing the position: absolute did not resolve the issue of overlapping behavior.

This is the structure of my HTML/CSS:

HTML:

  <div class="content-container">
    <paper-shadow z="1">
      <div class="content">
        <h1>{{heading}}</h1>
        <content></content>
      </div>
      <paper-shadow class="triangle" z="1"> </paper-shadow>
    </paper-shadow>
  </div>

CSS:

.content-container
  flex: 3 0 45%
  order: 1
  position: relative

  .content, .triangle
    background-color: #fafafa

  .content
    padding: 20px

  .triangle
    position: absolute
    height: 20px
    width: 20px
    top: 50%
    left: 100%
    transform: translate(-50%, -50%) rotate(-45deg)

The box-shadow is a feature of paper-shadow: https://www.polymer-project.org/docs/elements/paper-elements.html#paper-shadow

html css polymer

Answer 1

Answer №1

It's impossible to achieve what you're attempting with CSS alone. If two elements have overlapping box shadows, one must be positioned above the other using z-index. Removing the overlapping effect from only a portion of an element is not feasible.

One workaround is to render the box shadow as usual and then cover it with a simple rectangle to eliminate the overlap. Pseudo classes are useful for this, but it only works if both elements have the same background color and sufficient padding to prevent the artificial rectangle from overlapping the content.

Here's a jsFiddle example

Sample HTML:

<div class="box">
    <div class="triangle"></div>
</div>

And CSS:

.box {
    background:white;
    width:200px;
    height:100px;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
    position:relative;
    padding:25px;
}
.triangle {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: white;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
}
.box:after {
    position:absolute;
    content:'';
    background: white;
    height:40px;
    width:25px;
    right:0;
    top:50%;
    margin-top:-20px;
}

Answer 2

It's impossible to achieve what you're attempting with CSS alone. If two elements have overlapping box shadows, one must be positioned above the other using z-index. Removing the overlapping effect from only a portion of an element is not feasible.

One workaround is to render the box shadow as usual and then cover it with a simple rectangle to eliminate the overlap. Pseudo classes are useful for this, but it only works if both elements have the same background color and sufficient padding to prevent the artificial rectangle from overlapping the content.

Here's a jsFiddle example

Sample HTML:

<div class="box">
    <div class="triangle"></div>
</div>

And CSS:

.box {
    background:white;
    width:200px;
    height:100px;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
    position:relative;
    padding:25px;
}
.triangle {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: white;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
}
.box:after {
    position:absolute;
    content:'';
    background: white;
    height:40px;
    width:25px;
    right:0;
    top:50%;
    margin-top:-20px;
}

Answer 3

Answer №2

Alternatively, you have the option to utilize only the pseudo elements before and after to create a triangle shape and add a shadow. Employ :before for incorporating the triangle and :after for introducing the shadow.

body {
  background-color: #eee;
  padding: 20px;
}
.box {
  background: white;
  width: 200px;
  height: 100px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 25px;
}
.box:after {
  content: '';
  position: absolute;
  height: 31px;
  width: 31px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.box:before {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  border-width: 30px 30px 0px 0px;
  border-color: transparent white;
  border-style: solid;
}

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat pellentesque placerat.</div>

Answer 4

Alternatively, you have the option to utilize only the pseudo elements before and after to create a triangle shape and add a shadow. Employ :before for incorporating the triangle and :after for introducing the shadow.

body {
  background-color: #eee;
  padding: 20px;
}
.box {
  background: white;
  width: 200px;
  height: 100px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 25px;
}
.box:after {
  content: '';
  position: absolute;
  height: 31px;
  width: 31px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.box:before {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  border-width: 30px 30px 0px 0px;
  border-color: transparent white;
  border-style: solid;
}

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat pellentesque placerat.</div>

Unable to eliminate the overlapping box-shadow

Answer №1

Answer №2

Similar questions

How can we trigger the Skill bar effect upon scrolling to the section?

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

Gradual disappearance of preloader as the page loads

Preventing blank text entries in a task management application

Error: Unable to access the 'version' property of null

Is there a way to incorporate text at the end of a row in HTML?

What could be the reason for this tag not functioning properly?

Ensure that an input field on the PHP form is required

Achieving uniform alignment of multiple field labels in Bootstrap and Simple Form

On screens with smaller dimensions, the divs intersect with each other

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a glitch with child margins in a relative-absolute positioning setup?

tips for building angularjs widgets with limited scope

List-style-type outside of a table's boundaries

Is there a way to apply a blur effect to just the div itself without affecting its contents

Guide for displaying information as a grid or table format using Angular 4

Create an HTML document with a text element that has a bottom

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

"Discrepancy in Alignment of Bootstrap's Dual Column Layout

Invoke a node.js function from within an HTML document