Apply a CSS3 Box Shadow to a diagonal corner

Question

Apply a CSS3 Box Shadow to a diagonal corner

Currently, I am exploring some new coding techniques to enhance my skills.

I have a slanted left corner design element. Now, I am trying to incorporate a box shadow effect as shown in the following image:

https://i.sstatic.net/1MnL2.png

This is the code snippet I am working with:

html, body {
    margin: 0px;
}

.navbar {
  position:relative;
  content:""; 
   border-left: 300em solid #454545;
   border-bottom: 120px solid transparent;
  z-index: 2;
  box-shadow: 0px 8px 23px 4px black;
}


.under-bar {
    margin-top: -40px;
    background: #851e39;
    height: 200px;
    opacity: 0.8
}

<html>
   <body>
        <div class="navbar">

        </div>
        <div class="under-bar">
        </div> 
    </body>
</html>

Is there anyone who can guide me on how to add a box-shadow beneath the header?

html css box-shadow

Answer 1

Answer №1

Try using the CSS property transform: rotate(); instead of relying on border tricks.

body {
  margin: 0;
}
.content {
  width: 80%;
  background-color: #f2f2f2;
  position: relative;
  padding: 20px;
}
.box {
  height: 150px;
  width: 150px;
  background-color: #3498db;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}
.text {
  color: #fff;
}

<div class="content">
  <div class="box">
    <p class="text">This is a rotated box!</p>
  </div>
</div>

Answer 2

Try using the CSS property transform: rotate(); instead of relying on border tricks.

body {
  margin: 0;
}
.content {
  width: 80%;
  background-color: #f2f2f2;
  position: relative;
  padding: 20px;
}
.box {
  height: 150px;
  width: 150px;
  background-color: #3498db;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}
.text {
  color: #fff;
}

<div class="content">
  <div class="box">
    <p class="text">This is a rotated box!</p>
  </div>
</div>

Answer 3

Answer №2

To create a unique shape, consider using a combination of border-radius and transform: scale:

body {
  margin: 0;
  background: #9d4b61;
}

.navbar {
  width: 100%;
  height: 50px;
  background: #5c5c5c;
  border-radius: 0 0 100%/22px 0;
  box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
  transform: scale(1.1,1);
}

<div class="navbar"></div>

The use of border-radius: 0 0 100%/22px 0 creates a specialized corner with dimensions that result in a "stretched" appearance.

By applying transform: scale(1.1,1), the entire element is stretched to conceal the box-shadow on all sides.

Answer 4

To create a unique shape, consider using a combination of border-radius and transform: scale:

body {
  margin: 0;
  background: #9d4b61;
}

.navbar {
  width: 100%;
  height: 50px;
  background: #5c5c5c;
  border-radius: 0 0 100%/22px 0;
  box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
  transform: scale(1.1,1);
}

<div class="navbar"></div>

The use of border-radius: 0 0 100%/22px 0 creates a specialized corner with dimensions that result in a "stretched" appearance.

By applying transform: scale(1.1,1), the entire element is stretched to conceal the box-shadow on all sides.

Apply a CSS3 Box Shadow to a diagonal corner

Answer №1

Answer №2

Similar questions

Creating a stylish horizontal divider with circular accents at either end

Performing a jQuery post request using AJAX and setting the content type

The Carousel feature functions properly with 3 or more slides, but malfunctions when there are only 2 slides present

Mastering the use of Quasar variables in your scss styles is crucial for optimizing your

The bottom margin fails to function as expected

HTMLMediaElement does not have the setSinkId method

Utilize CSS scrolling to present all items in a single line

Starting with HTML5 can be a bit overwhelming, especially when it comes to compatibility with older systems

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

Displaying elements above my React sidebar

Designing Interactive Interfaces using React Components for Dynamic Forms

Is there a solution to fix the issue with IE causing hover effects not to

Ensure that adjacent elements operate independently from one another

Ways to align two elements within the same level in the DOM?

HTML code that has been "commented out" means

Swapping data between two HTML files and PHP

Execute a function on elements that are added dynamically

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

What is the best way to eliminate the space underneath a graph?