Question

我遇到了关于CSS（3）边框的问题。

我尝试转换输入文本字段，为其提供U形边框。左边框和右边框应该有50％的高度。

这意味着左上角，右上角和上边框应该是透明的。

困难的部分有以下要求：

不应该用重叠元素来掩盖顶部（所以额外的元素和伪元素，如：之前和之后都是一个解决方案
它应该是纯CSS（没有JavaScript库）
高度应为高度的50％

我尝试使用边框图像和线性渐变的组合来解决它，但没有成功

有人有解决此问题的方法吗？

谢谢！

P.S。很抱歉没有发布示例图片，但Stackoverflow不会让我......

Answer 1

这看起来像U，只有纯粹的CSS DEMO

div{
height:100px;
width:100px;
border:1px solid black;
border-top: 0px;
border-radius: 0px 0px 45px 45px;
}

这就是我从你的问题中理解的，如果它不是你想要的更多启发我

Answer 2

也许这就是你需要的

半径越大，圆圈越大取决于你喜欢什么

div{
    height:90%;
    width:90%;
    border:1px solid black;
    border-top: 0px;
    padding:2% 8% 20% 8%;
    border-radius: 0px 0px 50% 50%;
}

<div>The Roman and Han empires saw an exchange of trade goods, information, and occasional travelers, as did the later Eastern Roman Empire and various Chinese dynasties. These empires inched progressively closer in the course of the Roman expansion into the ancient Near East and simultaneous Han Chinese military incursions into Central Asia. Mutual awareness remained low and firm knowledge about each other was limited. Only a few attempts at direct contact are known from records. Several alleged Roman emissaries to China were recorded by ancient Chinese historians. The indirect exchange of goods along the Silk Road and sea routes included Chinese silk, Roman glassware (example pictured) and high-quality cloth. Roman coins minted since the 1st century AD have been found in China. A coin of Maximian and medallions from the reigns of Antoninus Pius and Marcus Aurelius were found in Vietnam. Roman glasswares and silverwares have been discovered at Chinese archaeological sites dated to the Han period. Roman coins and glass beads have also been found in Japan.</div>

Answer 3

你可以使用border-bottom-left-radius：50％;和border-bottom-right-radius：50％;在div上创建一个U形。

一个例子：

HTML

<div class="u-shape"></div>

CSS

.u-shape {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 300px;
    width: 50px;
}

如果你想为它添加一个边框来创建U形，只需给右边，左边和底边边框，如下所示：

CSS

.u-shape {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}

Answer 4

哎呀抱歉的家伙，

一个简单的

border-bottom: 1px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

当你的左，右和上边界透明时，

已经成功了。

仍然，感谢您的快速反应！

CSS U形或弯曲边框

4 个答案: