Html Question posted in
Some basic documentation can be found here.

Html – How to write versatile and reversible css for border radius?

I am creating a "Side by Side" component. I am designing it in a way where the text and image should be swap-able. Currently the inside border radius is hard coded as follows:

.side-by-side:has(img) {
    img {
        border: none;
        border-radius: 0 var(--radius-3) var(--radius-3) 0;
    }
}

How can I update this to be more versatile and reversible?

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks ChatGPT!

    

.side-by-side > img:first-child {
    border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.side-by-side > img:last-child {
    border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

    This fixed it.


  2. 0

    The correct semantic element for an image with description is <figure> and <figcaption> (see MDN WebDocs). So you simply should use that element.
    To ensure that border-radius will also clip the image, you should simply use overflow: hidden.
    To reverse the image and text you an simply use flex-direction: row-reverse

    figure {
  display: flex; 
  border: 2px solid orange;
  border-radius: 1em;
  overflow: hidden;
  img, figcaption {
    width: 50%;
  }
  figcaption {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}
    <figure>
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

<figure>
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

    Thanks to actual coding knowledge rather than relying on ChatGPT.

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

Back To Top
Search