根据兄弟姐妹的宽度动态设置 CSS border-bottom-left-radius

Question

我正在寻找一种方法来实现 Twitter 在他们的 Messenger 中所做的关于border-radius. 为了更容易解释，我将首先添加一些照片：图像border-bottom-left-radius集：没有 图像border-bottom-left-radius：关于 twitter 如何根据附加的文本消息的宽度动态设置border-radius（在本例中）的任何想法？border-bottom-left-radius.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>

Answer 1

所以根据你的解释。

我border-radius为你的班级添加了一个img如下：

border-radius: 1.25rem 1.25rem 0 0;

然后我在你的文本类中添加了一个填充，使它更好，最后。替换您的span设置p元素如下：

.text p{

  margin: 0 7px;

}

这样 text 就远离了border-radius.

你需要添加到你的班级.text { width: fit-content}

所以我们最终添加了js来调整border-bottom-left-radius当文本宽度等于img宽度时。我们创建类以在宽度相等的情况下添加：

.border-bottom-left-radius{

  border-bottom-left-radius: 0 !important;

}

正如 hatef 在评论中提到的那样。重新加载窗口是动态的，但不调整大小。为此，我从这个答案中的现有代码中改编了代码：使用 javascript 检测何时更改 div 宽度

通过添加这个 js 来检测 body 元素的变化（如果它会被调整大小）：

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>