我正在尝试使用flexbox使相交线成矩形。这是我想什么做相交线的圆角矩形
HTML
<div id="nav-bar">
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
</div>
你应该能够与一对夫妇绝对定位伪元素来做到这一点：
html,
body {
padding: 0;
margin: 0;
background-color: #e24d3d;
}
button {
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
border: none;
color: white;
height: 62px;
width: 130px;
}
#nav-bar {
max-width: 300px;
height: 150px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
background-color: rgba(255, 255, 255, .1);
border: 1px solid #FFF;
border-color: rgba(255, 255, 255, 0.70);
border-radius: 10px;
/* add these styles */
position: relative;
overflow: hidden;
}
.item {
margin: 0px auto;
background-color: transparent;
color: #000;
display: flex;
text-align: center;
align-items: center;
height: 50%;
width: 50%;
}
/* added the below */
#nav-bar:before,
#nav-bar:after {
content: '';
display: block;
position: absolute;
}
#nav-bar:before {
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 1px solid white;
}
#nav-bar:after {
top:-5px;
bottom:-5px;
left:50%;
transform:rotate(10deg);
border-left: 1px solid white;
}<div id="nav-bar">
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
<div class="item">
<button>TEXT</button>
</div>
</div>使用绝对定位伪，将它们设置在左侧/顶部item，它们将随文本一起缩放。
栈片断
html, body {
margin: 0;
background-color: #e24d3d;
}
button {
font-family: 'Raleway', sans-serif;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
display: flex;
flex-direction: column;
justify-content: center;
background-color: transparent;
border: none;
color: white;
min-height: 62px;
min-width: 130px;
margin-left: 10px;
}
#nav-bar {
max-width: 500px;
min-width: 300px;
height: 150px;
margin: 10px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
background-color: rgba(255, 255, 255, .1);
border: 1px solid #FFF;
border-color: rgba(255, 255, 255, 0.70);
border-radius: 10px;
overflow: hidden;
}
.item {
position: relative;
background-color: transparent;
color: #000;
}
.item button {
display: flex;
justify-content: center;
align-items: center;
}
.item:nth-child(1):before, .item:nth-child(1):after {
content: '';
position: absolute;
background-color: #000;
}
.item:nth-child(1):before {
left: 0;
top: 100%;
width: 200%;
height: 1px;
}
.item:nth-child(1):after {
left: 100%;
top: -25%;
width: 1px;
height: 250%;
transform: rotate(10deg);
transform-origin: center center;
}<div id="nav-bar">
<div class="item"><button>TEXT</button></div>
<div class="item"><button>Some large text</button></div>
<div class="item"><button>TEXT</button></div>
<div class="item"><button>TEXT</button></div>
</div>
是啊，这几乎是它！我有一个[**较大的文本**]（https://jsfiddle.net/xms42uhz/8/）的问题，你知道如何推第一列到第二，但也推动旋转垂直线与他们，这里是[**马铃薯油漆图片解释**]（http://imgur.com/3eIhwQf） – cygnus
您可以通过更改左侧的垂直线：之后 - 接近100％更加正确。随着项目的宽度 - 我实际上增加了一个宽度.item，因为我试图居中文本 - 不知道如果你需要的宽度。没有办法做到这一点动态，因为你不能通过js – Pete
影响伪元素的位置[在这个小提琴中]（https://jsfiddle.net/xms42uhz/9/）我已经删除了宽度从按钮和.item并改变了后面的左边 – Pete