0

I'm looking for a way to achieve what twitter does in their messenger regarding the border-radius. To make it simpler to explain I'll first add some photos:

Image with border-bottom-left-radius set:

enter image description here

Image without border-bottom-left-radius:

enter image description here

Any idea on how twitter dynamically sets the border-radius (in this case border-bottom-left-radius) based on the width of the text message attached to it?

.image {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
    display: block;
    margin-left: auto;
    width: 70%;
}

.text {
    border-radius: 0 0 0 1.25rem;
    float: right;
    background-color: rgb(230, 236, 240);
    height: 40px;
    max-width: 70%;
    padding-top: 5px;
}

.divider {
    display:block; 
    margin-top: 80px;
}
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div class="text">
    <span>This is the text</span>
</div>

<div class="divider"></div>

<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div class="text">
    <span>This is just a relatively longer text for the sake of demonstrating this example!!</span>
</div>
Mr. Robot
  • 63
  • 8

1 Answers1

2

So based on your explication.

I added a border-radius for your class img as followed:

border-radius: 1.25rem 1.25rem 0 0;

Then I added a padding to your text class to make it nicer and finaly. replace your span to set you p element as followed:

.text p{
  margin: 0 7px;
}

This way text satys away from the border-radius.

You need to add to your class .text { width: fit-content}

So we finaly added js to adjust border-bottom-left-radius when the text width is equal to img width. And we create the class to add in case widths are equal:

.border-bottom-left-radius{
  border-bottom-left-radius: 0 !important;
}

As mentionned by hatef in comment. It was dynamic for reload window but not resizing. To do so I adapted code from existing code in this answer: detect when div width is change using javascript

By adding this js that will detect the change of body element if it would be resized:

displayWindowSize();
window.addEventListener("resize", displayWindowSize);

function displayWindowSize(){
    const imgEl = document.getElementById('img');
    const textEl = document.getElementById('text');

  if(imgEl.offsetWidth <= textEl.offsetWidth){
      imgEl.classList.add("custom-radius");
  }

  if(imgEl.offsetWidth > textEl.offsetWidth){
    imgEl.classList.remove("custom-radius");
  }
}
.image {
    border-radius: 1.25rem 1.25rem 0 1.25rem;
    display: block;
    margin-left: auto;
    width: 70%;
}

.text{
    float: right;
    background-color: rgb(230, 236, 240);
    border-radius: 0 0 0 1.25rem;
    margin-left: auto;
    width:fit-content;
    max-width: 70%;
    padding: 5px 0;
}

.text span{
  display:block;
  padding-left: 20px;
  padding-right: 5px;
}

.custom-radius {
  border-bottom-left-radius: 0 !important;
}
<img id="img" class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg/512px-Miscanti_Lagoon_near_San_Pedro_de_Atacama_Chile_Luca_Galuzzi_2006.jpg" />

<div id="text" class="text">
    <span>This is the text This is a text this is a text</span>
</div>
hatef
  • 5,491
  • 30
  • 43
  • 46
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
  • Hey, thanks for taking the time to answer my question. However, if you look at the first photo I posted above, the width of the text is dynamic and it changes based on the content. The max-width is matching with the content and that only happens for relatively long texts. – Mr. Robot Sep 24 '20 at 20:25
  • 1
    @Mr.Robot I actualy fixed this by replacing your span element by p element as it is display block default for p and inline for span. If you check the example with short text, it works fine – MaxiGui Sep 24 '20 at 20:32
  • Ah sorry i meant _left_ not _right_! Edited my question :) – Mr. Robot Sep 24 '20 at 20:33
  • I updated my snippet, I guess what you are searching for is: `width:fit-content;` Added in `.text` class – MaxiGui Sep 24 '20 at 20:37
  • Sorry for the confusion. I updated my question again. This works fine but the thing is I would like to remove the `border-bottom-left-radius` on the `img` when the text reaches the max-wdith (please look at the second picture in my question). – Mr. Robot Sep 24 '20 at 20:40
  • 1
    oh okay, I think only way to make it will be to use js or jquery, would it be fine for you ? – MaxiGui Sep 24 '20 at 20:43
  • I don't really mind JavaScript or CSS. I just can't find a way for this, I feel like it's simple but I can't think of a good solution. :S – Mr. Robot Sep 24 '20 at 20:49
  • @Mr.Robot Here you go. I made an easy case with getElementById If now you want to use classe, you will need to same"if" but in loop. as getElementsByClass will return an array – MaxiGui Sep 24 '20 at 21:07
  • @MaxiGui this only works on page reload i.e. it wouldn't adjust dynamically on window resize, but it should give them an idea. Plus, I wouldn't use `border-bottom-left-radius` as a class name. – hatef Sep 25 '20 at 06:54
  • 1
    @hatef you are right about resizing window so I updated my answer with code taken from an existing subject to make it clear (even though I don't really get the goal to do so). For the classname, it is really for the example here to be clear. But if you have any other suggestion for my future answer, I would be happy to know. – MaxiGui Sep 25 '20 at 07:43
  • 1
    Great, I edited your code to make it slightly simpler to read. I hope you don't mind! :) – hatef Sep 25 '20 at 07:57