Css 并排、居中和溢出屏幕边缘的Divs

我正试图设计一个登录页链接到2个网络应用程序。我试图使设计尽可能具有视觉吸引力。我认为如果包含链接的div并排放在屏幕的中心，并且边缘溢出屏幕的左右两侧，看起来会很好。然后我可以在它们上加上一个边界半径和一些漂亮的块状颜色：

目标：

我尝试了许多选项，包括内联块和溢出：隐藏：

HTML

---

这可能吗？我已经找到了几种方法让它们并排出现（例如，但没有任何方法能让它们溢出屏幕）

只要使用绝对位置就可以了

我添加了一个包装器，但它可能不是必需的

* { 保证金：0； 填充：0； 框大小：边框框； } 身体 html， .包装纸{ 身高：100%； } .包装纸{ 位置：相对位置； } .btn{ 宽度：45%； 身高：30%； 背景：浅蓝色； 边框：2件纯蓝； 位置：绝对位置； 最高：50%； 转化：translateY-50%； } .左{ 左：0； 边界半径：0.25%25%0； 左边界：无； } .对{ 右：0； 边界半径：25%025%； 边界权：无； }

---

您可以通过正确项目的绝对定位和负边距来实现这一点。不过，为了达到效果，你必须调整身体的大小。我还分别在第一项和第二项中添加了单独的类。app-btn-1和。app-btn-2：

}

---

注意：为了让我的演示在JSFIDLE中正确显示，我将大小分成了四分之一，以便您可以在小窗口中看到效果

.菜单{ 显示：内联块； 高度：200px； 宽度：40%； 保证金上限：calc50%-100px； 边框：2倍纯红； 背景颜色：棕色； 颜色：黑色； 文字装饰：无； 过渡：均为0.5s； } 左{ 浮动：左； 边框右上角半径：10px； 边框右下半径：10px； 左边距：-10px； } 对{ 浮动：对； 边框左上半径：10px； 边框左下半径：10px； 右边距：-10px； } .菜单：悬停{ 背景颜色：灰色； 边框颜色：棕色； 颜色：红色； }

---

如果你隐藏溢出，为什么它们需要溢出？不知道你想在这里做什么我想他们不会，但如果有意义的话，我希望边框半径框的一半的外观。既然您知道尺寸，您可以这样做：尝试更改边框的宽度，您将看到按钮如何跟随set-som overflow hidden以隐藏滚动，如版本/2所示。非常感谢！你最初的评论让我记得，你可以为每个角独立设置边界半径，这当然意味着它实际上不必溢出。不过值得注意的是，在Firefox中，至少边界半径：%%%%语法绘制了有趣的椭圆半径，因此我将使用边界左上角半径等，这似乎很好。再次感谢！

<div id="centre-pane">
    <div class="app-btn">
        <a href="l1.php"><img src="icon.png">link text</a>
    </div>
    <div class="app-btn">
        <a href="l2.php"><img src="icon2.png">link text</a>
    </div>
</div>

.app-btn 
{
    width:1000px;
    height:320px;

    display:inline-block;
    border:10px solid black;
    border-radius: 50px;
}

#centre-pane {   
    width:2000px;
    margin:0 auto;
    text-align:center;
    overflow-x: hidden;
}

body {
    width: 2000px;
    overflow-x: hidden;
}

.app-btn {
    width:1000px;
    height:320px;
    position: absolute;
    border:10px solid black;
    border-radius: 50px;
    overflow-x: hidden;
}

.app-btn-1 {
    left: -500px;
    text-align: right;
}

.app-btn-2 {
    left: 100%;
    margin-left: -500px;