div 的圆角底部边框答案

【问题标题】：Rounded bottom border for divdiv 的圆角底部边框
【发布时间】：2023-03-14 15:58:01
【问题描述】：

我正在尝试在div 的底部边框中进行舍入。可以用css做吗？我知道您可以通过以下方式转角：

border-bottom-left-radius: 50px;

我想我正在尝试实现与此相反的操作。

任何帮助将不胜感激。

谢谢

【问题讨论】：

你能用一张图片来说明你在想什么吗？使用一些额外的 HTML 或其他东西可能会重现该效果......但您不能以您可能想要的方式操纵边框本身。
你好，我画了一个例子。谢谢
啊，我明白了。如果没有背景图像或 canvas/svg 元素，您将无法做到这一点

标签： css html css3pie

【解决方案1】：

当然这是“可能的”。覆盖 div。

http://jsfiddle.net/jprGx/3/

.outer {
    width: 50px; 
    height: 50px;
    position: relative;
    border: #000 1px solid;
}

.inner {
    position:absolute;
    background: #fff;
    height: 20px;
    width: 50px;
    bottom: -1px;
    left: -1px;
    border-left: #000 1px solid;
    border-top: #000 1px solid;
    border-right: #000 1px solid;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

【讨论】：

它可能无法完全满足您的需求，但无论如何，这是一个有趣的练习。 :)
其实这正是我所需要的！非常感谢！ :)
很好的解决方案，您也可以将 .inner 替换为 .outer:after 以更简单（放弃向后兼容性）。

【解决方案2】：

执行此操作的更简单和更容易的方法是通过以下方式隐式编码：

    .round{
    border-radius: 0px 0px 50px 50px;
    }

边框半径：0px（左上角）0px（右上角）50px（左下角）50px（右下角）

【讨论】：