CSS U 形或弯曲边框答案

【问题标题】：CSS U shaped or curved bordersCSS U 形或弯曲边框
【发布时间】：2014-09-19 17:31:10
【问题描述】：

我遇到了关于 CSS(3) 边框的问题。

我正在尝试将输入文本字段转换为 U 形边框。左右边框应为高度的 50%。

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

困难的部分是以下要求：

不应该使用重叠元素来掩盖顶部（因此附加元素和伪元素，如 :before 和 :after 不是解决方案
应该是纯 CSS（没有 JavaScript 库）
高度应为高度的 50%

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

有人有解决这个问题的方法吗？

谢谢！

附：很抱歉没有发布示例图片，但 Stackoverflow 不会让我...

【问题讨论】：

对不起，我的问题陈述不完整，我忘了提左右边框的50%高度

标签： css border gradient css-shapes

【解决方案1】：

这是一个看起来像 U 的东西，只有纯 css
DEMO

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

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

【讨论】：

对不起，我的问题陈述不完整，我忘了提左右边框的50%高度
这个问题已经发了太多次了，Possible Duplicate，Here 无法风格化一半的边框，除非你使用图片，你可以添加一个div元素作为掩码隐藏一半边框
如问题中所述：掩码/重叠元素不是解决方案
据我所知这是不可能的

【解决方案2】：

也许这些就是你需要的

半径百分比越大，圆圈越大看你喜欢什么

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

&lt;div&gt;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.&lt;/div&gt;

【讨论】：

【解决方案3】：

你可以使用border-bottom-left-radius: 50%;和边界右下角半径：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;
}

【讨论】：

对不起，我的问题陈述不完整，我忘了提左右边框的50%高度

【解决方案4】：

对不起各位，

一个简单的

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

当你的左、右和上边框透明时已经成功了。

不过，感谢您的快速响应！

【讨论】：