Creating an indentation on one side of a div using CSS for a visually appealing effect

Question

Creating an indentation on one side of a div using CSS for a visually appealing effect

https://i.stack.imgur.com/io6m0.jpg

I'm in the process of trying to create two shapes using CSS. I've been able to almost achieve the first shape on the left, but it extends out too far.

As for the second shape, I'm having difficulties creating it altogether.

Is there a way to replicate these shapes without relying on Psuedo elements or using just one div?

The end goal is to utilize CSS animation to transform the initial shape into the second one, ruling out SVG as an option.

The div should begin as shape one and smoothly transition into shape two. However, I'm encountering issues with the bulge protruding too much using my current method.

HTML

<div id="one"></div>
<div id="two"></div>

CSS

div {
    width: 80px;
    height: 80px;
    background: black;
    margin: 60px;
    position: relative;
}

#one:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 55%;
  width: 80px;
  height: 80px;
  background: black;
  left: 0;
  top: -34px;
}

JS Fiddle Link

css css-animations css-shapes

Answer 1

Answer №1

If you want to morph bezier paths, consider using Raphael or SVG. Unfortunately, I am not familiar with how to achieve this effect. Nonetheless, it should provide a clean solution.

One possible approach could be as follows:

Create an element and set overflow hidden
Apply timing on the pseudo-element and animate border radius and height
Utilize box shadow of the pseudo-element for coloring

[Link to Fiddle example](https://jsfiddle.net/np31uaoy/1/)

body{
    background: url("http://www.placekitten.com/g/600/400");
    background-size: cover;
}

#rect {
    height: 300px;
    width: 100px;
    border-top-left-radius: 50px 40px;
    border-top-right-radius: 50px 40px;
    position: relative;
    overflow: hidden;
    -webkit-animation: morph 1s linear 1;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph 1s linear 1;
    animation-fill-mode: forwards; 
}

#rect:before {
    position: absolute;
    content: "";
    width: 100px;
    box-shadow: 0px 0px 0px 400px #A34;
    -webkit-animation: morph2 1s linear 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph2 1s linear 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
}

@-webkit-keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@-webkit-keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

/*FOR OTHER BROWSERS*/

@keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

<div id="rect">
</div>

NOTE Apologies for the lengthy code, I'm a bit rusty after a year of not working with CSS and HTML. There's definitely room for optimization here.

Answer 2

If you want to morph bezier paths, consider using Raphael or SVG. Unfortunately, I am not familiar with how to achieve this effect. Nonetheless, it should provide a clean solution.

One possible approach could be as follows:

Create an element and set overflow hidden
Apply timing on the pseudo-element and animate border radius and height
Utilize box shadow of the pseudo-element for coloring

[Link to Fiddle example](https://jsfiddle.net/np31uaoy/1/)

body{
    background: url("http://www.placekitten.com/g/600/400");
    background-size: cover;
}

#rect {
    height: 300px;
    width: 100px;
    border-top-left-radius: 50px 40px;
    border-top-right-radius: 50px 40px;
    position: relative;
    overflow: hidden;
    -webkit-animation: morph 1s linear 1;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph 1s linear 1;
    animation-fill-mode: forwards; 
}

#rect:before {
    position: absolute;
    content: "";
    width: 100px;
    box-shadow: 0px 0px 0px 400px #A34;
    -webkit-animation: morph2 1s linear 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph2 1s linear 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
}

@-webkit-keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@-webkit-keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

/*FOR OTHER BROWSERS*/

@keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

<div id="rect">
</div>

NOTE Apologies for the lengthy code, I'm a bit rusty after a year of not working with CSS and HTML. There's definitely room for optimization here.

Answer 3

Answer №2

There is no known way to achieve an animation effect without utilizing pseudo-elements in CSS. A complex approach involves using multiple gradients and pseudo-elements to create a concave shape effect, as detailed below:

The main div element forms the caved-in/concave shape by combining radial-gradient and linear-gradient. The top half of the parent's height is made transparent with the radial gradient, while the bottom half displays a solid black color through the linear gradient.
The :before element features two radial gradients to create the illusion of stacked half ellipses. One is transparent on top (and black for the remaining) while the other is black at the bottom (and transparent elsewhere). This setup works together to give the appearance of a bulged area caving in during animation.
The :after element showcases a single radial gradient producing a solid black ellipse. Positioned halfway above the parent element, it contributes to the bulged effect.
In the initial phase of the animation, the :after element rotates along the X-axis by 90 degrees, simulating a slow disappearance. Subsequently, the :before element's background-position is animated to switch the position of the black colored half ellipse with the transparent half ellipse.

Relevant CSS code snippet provided below...

A visual representation of the three elements without overlap is displayed here. The animations remain intact to showcase the transformation process. Notably, these visual effects can be maintained even after adjusting the dimensions of the parent container when calculated correctly.

Relevant CSS code snippet provided below...

An alternative version with different dimensions for the container and the transparent section is illustrated below to explore varying visual outcomes.

Relevant CSS code snippet provided below...

Answer 4

There is no known way to achieve an animation effect without utilizing pseudo-elements in CSS. A complex approach involves using multiple gradients and pseudo-elements to create a concave shape effect, as detailed below:

The main div element forms the caved-in/concave shape by combining radial-gradient and linear-gradient. The top half of the parent's height is made transparent with the radial gradient, while the bottom half displays a solid black color through the linear gradient.
The :before element features two radial gradients to create the illusion of stacked half ellipses. One is transparent on top (and black for the remaining) while the other is black at the bottom (and transparent elsewhere). This setup works together to give the appearance of a bulged area caving in during animation.
The :after element showcases a single radial gradient producing a solid black ellipse. Positioned halfway above the parent element, it contributes to the bulged effect.
In the initial phase of the animation, the :after element rotates along the X-axis by 90 degrees, simulating a slow disappearance. Subsequently, the :before element's background-position is animated to switch the position of the black colored half ellipse with the transparent half ellipse.

Relevant CSS code snippet provided below...

A visual representation of the three elements without overlap is displayed here. The animations remain intact to showcase the transformation process. Notably, these visual effects can be maintained even after adjusting the dimensions of the parent container when calculated correctly.

Relevant CSS code snippet provided below...

An alternative version with different dimensions for the container and the transparent section is illustrated below to explore varying visual outcomes.

Relevant CSS code snippet provided below...

Answer 5

Answer №3

To achieve the desired effect, utilize a pseudo-element along with overflow:hidden property

*{box-sizing: border-box}

html{text-align: center;padding: 60px 10px}

.fig{
  margin: 20px auto;
  width: 100px;
  height: 200px;
  position: relative
}
.fig:before{
  content:'';
  position: absolute;
  top: -50px;
  left:0;
  width: 100px;
  height: 100px;
  border-radius: 50%
}
#one{background: black}
#two{overflow: hidden; box-shadow: inset 0 -150px black}
#one:before{background: black}
#two:before{box-shadow: 0 3em black}

<div id=one class=fig></div>
<div id=two class=fig></div>

Answer 6

To achieve the desired effect, utilize a pseudo-element along with overflow:hidden property

*{box-sizing: border-box}

html{text-align: center;padding: 60px 10px}

.fig{
  margin: 20px auto;
  width: 100px;
  height: 200px;
  position: relative
}
.fig:before{
  content:'';
  position: absolute;
  top: -50px;
  left:0;
  width: 100px;
  height: 100px;
  border-radius: 50%
}
#one{background: black}
#two{overflow: hidden; box-shadow: inset 0 -150px black}
#one:before{background: black}
#two:before{box-shadow: 0 3em black}

<div id=one class=fig></div>
<div id=two class=fig></div>

Creating an indentation on one side of a div using CSS for a visually appealing effect

Answer №1

Answer №2

Answer №3

Similar questions

Tips for restricting text within a div container

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

What could be causing my CSS/Layout to alter once AJAX/JavaScript has been executed?

From Table to DIV: A Simple Conversion

What is the best way to switch between displays within an if-else statement?

How can I make sure to consider the scrollbar when using viewport width units?

The animation for the CSS gradient background is failing to animate

The inner div appears to have content but is actually measured as 0x0 in size

Resizable vector graphics with consistent border dimensions

jQuery: Function is not running as expected

Safari does not stop the scrolling of the <body style="overflow-y: hidden"> tag

In JavaScript, you can update the class named "active" to become the active attribute for a link

How can I dynamically assign a className in a React component based on the current state when importing styles?

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

The vertical spacing in Font "bottom-padding" appears to be larger than anticipated

Switch the navbar background color from see-through to black

Tips on updating the highlighted color of the item currently selected in NavBarDropdown using react-bootstrap

Is it possible for CSS3 transitions to handle multiple tasks simultaneously? Let's experiment with Fiddle and find out

Strategies for Increasing Index Values in JavaScript

Avoiding the collapse of the Bootstrap 4 navbar