CODEWITHSUNDEEP
csscss-shapes
Jordan Simon
Jordan Simon

Reputation: 289

CSS 3 Shape: inverted rounded corner "tunnel-like style"

I am looking to create a tunnel-like div which has inverted circle borders

comp design

As you can see it has an 'expanding tunnel effect' from left to right. Ideally the checkered background is transparent but if that is impossible I can maybe make it work with a solid background color.

Can anyone help me out creating this css3 shape? Hopefully with a jsfiddle that I can play with?

Thank you!

Upvotes: 0

Views: 1114

Answers (1)

misterManSam
misterManSam

Reputation: 24702

This can be created using a :before and :after pseudo element:

Screenshot completed

  • The background colour is provided with the box-shadow colour, allowing the top and bottom of the shape to be transparent

  • The curve is created with the border-radius like so:

    (the red area is transparent)

    Screenshot

Complete Example

div {
  height: 300px;
  width: 200px;
  position: relative;
  overflow: hidden;
}
div:before {
  top: -60px;
  border-bottom: solid #EEE;
  border-right: solid #EEE;
  border-radius: 0 0 60% 0;
  box-shadow: 50px 10px 0 60px #F90;
}
div:after {
  bottom: -60px;
  box-shadow: 50px 10px 0 60px #F90;
  border-radius: 0 60% 0 0;
  border-top: solid #EEE;
  border-right: solid #EEE;
}
div:before,
div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 160px;
  right: 0;
  border-width: 3px;
}
<div></div>

Upvotes: 5

Related Questions