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

Divide information in the chart

Animations are failing to run within a Bootstrap card when using Vue rendering

I want to use flexbox to center three divs on my webpage

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

Are there any special CSS hacks that only work for IE8?

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Designing hover-activated submenus and ensuring they appear at the forefront

Mobile display issue with CSS columns when using the :checked pseudo class

Center-align the items in an owl carousel

Having trouble replacing scss variables in react-h5-audio-player

How can the parent div be made transparent without affecting the child div's visibility?

Tips for properly utilizing "require" in application.css with the Skeleton framework

What is the best way to vertically center my footer text?

Unusual Actions from the Text Field

Troubleshooting: Unable to preview Facebook Page plugin

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

Can you explain the mechanics behind Angular Component CSS encapsulation?

What is the process for connecting an HTML page to a CSS file located in a parent directory?

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

Tips for creating responsive scrollable columns in an HTML table with Bootstrap