All geek questions in one place

CSS3 curved cutout from div?

Is there a way to create a cutout in a div with CSS3 , as in the example below?

enter image description here

What I'm trying to do is create a cutout between 2 divs as an image. The actual div that is being cut is at the bottom of the div , it has background-color , a drop shadow , inset shadow and a border style .

What I would like to do is put the CSS3 button inside the div cut.

+2
source share
2 answers

EDIT - NEW SOLUTION

with radial-gradient , you can get new quality levels in cuts divs: Demo version

Learn more about fooobar.com/questions/953926 /.

OLD Solution

You can do this with a homogeneous background, and not with an artistic one like yours. There are things that CSS will never do, such as becoming Photoshop.

However, you can do the trick using borders, negative margin and z-index;

Demo: http://jsfiddle.net/cB8Qq/

HTML

 <body> <div class="container"> <div class="rounded">bla bla bla</div> <div class="digged"> <br/><br/>or yada yada yada </div> </div> </body>

CSS

 .container{ text-align: center; background: #ddd; } .rounded{ margin: 0 auto; border-radius: 50px; width: 200px; height: 30px; background: silver; padding: 10px; border: 10px solid #ddd; z-index: 1; position: relative; } .digged{ margin: 0 auto; background: silver; width: 400px; height: 100px; margin-top: -30px }
+4
source

You may need to simplify your design, but a similar effect is possible using gradients and pseudo-elements.

Demo

 body{background: salmon;} .main {background:gray; width:300px; height:200px; position: relative; margin-top:20px;} .main:after, .main:before{content:''; width: 50px; height: 20px; background: inherit; position: absolute; } .main:after{ top:-20px; left:0;} .main:before{ top:-20px; right:0;} .phone{width:175px; height:40px; background: gray; margin-left:62.5px; border-radius: 50px; text-align: center; line-height: 40px; position: relative;} .phone:after,.phone:before{content:''; width:20px; height:20px; background:red; position: absolute;} .phone:before{bottom:-20px; left:-12px; background: -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, gray 15px);} .phone:after{bottom:-20px; left:168px; background: -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, gray 15px);}
0
source

Source: https://habr.com/ru/post/953927/

More articles:


All Articles