根据兄弟姐妹的宽度动态设置 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{&nbsp; margin: 0 7px;}这样 text 就远离了border-radius.你需要添加到你的班级.text { width: fit-content}所以我们最终添加了js来调整border-bottom-left-radius当文本宽度等于img宽度时。我们创建类以在宽度相等的情况下添加：.border-bottom-left-radius{&nbsp; border-bottom-left-radius: 0 !important;}正如 hatef 在评论中提到的那样。重新加载窗口是动态的，但不调整大小。为此，我从这个答案中的现有代码中改编了代码：使用 javascript 检测何时更改 div 宽度通过添加这个 js 来检测 body 元素的变化（如果它会被调整大小）：displayWindowSize();window.addEventListener("resize", displayWindowSize);function displayWindowSize(){&nbsp; &nbsp; const imgEl = document.getElementById('img');&nbsp; &nbsp; const textEl = document.getElementById('text');&nbsp; if(imgEl.offsetWidth <= textEl.offsetWidth){&nbsp; &nbsp; &nbsp; imgEl.classList.add("custom-radius");&nbsp; }&nbsp; if(imgEl.offsetWidth > textEl.offsetWidth){&nbsp; &nbsp; imgEl.classList.remove("custom-radius");&nbsp; }}.image {&nbsp; &nbsp; border-radius: 1.25rem 1.25rem 0 1.25rem;&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; width: 70%;}.text{&nbsp; &nbsp; float: right;&nbsp; &nbsp; background-color: rgb(230, 236, 240);&nbsp; &nbsp; border-radius: 0 0 0 1.25rem;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; width:fit-content;&nbsp; &nbsp; max-width: 70%;&nbsp; &nbsp; padding: 5px 0;}.text span{&nbsp; display:block;&nbsp; padding-left: 20px;&nbsp; padding-right: 5px;}.custom-radius {&nbsp; 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">&nbsp; &nbsp; <span>This is the text This is a text this is a text</span></div>