html - 我可以创建一个底部 flex 的 div 吗?

标签 html css css-shapes

所以我在一个网站上工作,我想知道是否有可能纯粹使用 HTML5、CSS3(如果需要,还有 JavaScript),制作一个底部 flex 的 div,所以它实际上看起来像这样:

enter image description here

或者这只能使用背景图像来完成?

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">Home</a></li>
        </ul>
        </div>
    </div>
</body>

最佳答案

CSS:

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

看看这对你好吗:DEMO

关于html - 我可以创建一个底部 flex 的 div 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17040709/

相关文章:

css - 在纯 CSS 中带有描边的 flex 边框?

css - 具有百分比宽度的响应式 CSS 三 Angular 形

java - 我的数据库在 netbeans 上构建的 jsp 页面上连接不简单

javascript - 旋转后使文本适合 div 容器

javascript - antd 按钮中的文本和图标未垂直对齐

html - 如何仅使用 div 和 css 创建此形状

html - 重构 HTML 和 CSS

html - 如何在一行中制作部分?

javascript - 来自here.com的图 block / map 的Z索引

javascript - Angular Material - md-virtual-repeat in list - 滚动/加载/显示问题