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

Question

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

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!

Answer 1

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

• 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)

  

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>