Question 220832 in CSS Question posted in
Some basic documentation can be found here.

Css – Outside rounded corner with background image

I have created a codesandbox sample.

https://codesandbox.io/s/cool-mendel-pxygjc

When click the box div, the panel content will show.

Two div using the same background image.

I am trying to make this corner rounded and show the same background image, but don’t know how to do it.

Appreciate if someone who can give me some hints to achieve this.

enter image description here

Tags:

2

Answers


  1. 0

    better use one div only, change two div to one div and use overflow in CSS, then in javascript add click event. So, my suggestion is to use CSS overflow so it’s neat and not too complex.
    CSS Overflow : https://www.w3schools.com/css/css_overflow.asp

    the clue is, when clicked change the overflow value. can use the toggle on javascript.
    js toggle : https://www.w3schools.com/howto/howto_js_toggle_class.asp

    Login or Signup to reply.
  2. 0

    Here’s a possible solution:

    .box.active {
  position: relative;
}
.box.active::after,
.box.active::before {
  content: '';
  bottom: 0;
  left: 100%;
  position: absolute;
  width: 30px;
  height: 30px;
}
.box.active::after {
  background-color: white;
  border-radius: 0 0 0 30px;
}
.box.active::before {
  background-image: url('https://placekitten.com/2000/600');
  background-position: -432px -152px;
}

    Demo.

    However, I strongly recommend against this type of hard-coding sizes into containers/background images. It doesn’t scale well and it’s not responsiveness-friendly.
    To be totally honest, I don’t find it particularly appealing from a design perspective, either. I’m aware it’s a subjective matter and it can change for the better with the right colors/images.

    If I was asked to create this type of solution without hard-coding pixels, I’d probably go for generating an SVG shape on the fly which would get updated every time any of the two content containers would change size and use this dynamic SVG to mask a third element responsible for rendering the background, rendered below the content containers.

    Another possible solution would be the one above, but relying on CSS variables which would could get informed/updated by React.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search