划分并排，居中和溢出的屏幕边缘

Question

我正在尝试设计一个链接到2个网络应用的目标网页。我试图让设计尽可能具有视觉吸引力。我认为如果包含链接的Div在屏幕中央并排放置，其边缘溢出屏幕的左右两侧，那将会很好看。然后我可以在它们上放一个border-radius和一些漂亮的块状颜色：

目标：

我尝试了很多选项，包括inline-block和overflow:hidden：

HTML

<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>

CSS

.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;
}

这可能吗？我找到了几种并排获取它们的方法（例如here），但没有任何方法可以让它们溢出屏幕。

Answer 1

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

我添加了一个包装器，但可能不需要它。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html,
.wrapper {
  height: 100%;
}
.wrapper {
  position: relative;
}
.btn {
  width: 45%;
  height: 30%;
  background: lightblue;
  border: 2px solid blue;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  left: 0;
  border-radius: 0 25% 25% 0;
  border-left: none;
}
.right {
  right: 0;
  border-radius: 25% 0 0 25%;
  border-right: none;
}

<div class="wrapper">
  <div class="btn left"></div>
  <div class="btn right"></div>
</div>

Answer 2

您可以通过绝对定位和负边距（对于正确的项目）实现此目的。您必须确定body的大小才能达到效果。我还分别为第一项和第二项添加了单独的类（.app-btn-1和.app-btn-2）：

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;

}

DEMO

注意：为了让我的演示在jsfiddle看起来正确，我已将这些尺寸分开，以便您可以在小窗口中看到效果

Answer 3

以下是您需要的代码：

.menu {
    display: inline-block;
    height: 200px;
    width: 40%;
    margin-top: calc(50% - 100px);    
    border: 2px solid red;
    background-color: brown;
    color: black;
    text-decoration: none;
    transition: all 0.5s;
}
#left {
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: -10px;
}
#right {
    float: right;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: -10px;
}
.menu:hover {
    background-color: gray;
    border-color: brown;
    color: red;
}

<a href="#"><div class="menu" id="left">Left</div></a>
<a href="#"><div class="menu" id="right">Right</div></a>

我为你做了 JS Fiddle。