我有一个问题,我如何用css对这个盒子进行划分? 像我在下图中看到的东西。
http://saavorapi.parkeee.net/API/KitchenService.svc/DishInsertUpdate
答案 0 :(得分:3)
您可以使用flexbox
和transform
属性。
这是一个解决方案
.container{
display: flex;
width: 400px;
height: 200px;
border: 1px solid gray;
}
.left, .right{
flex: 1;
text-align: center;
}
.divider{
width: 1px;
background: gray;
transform: rotate(6deg);
}

<div class="container">
<div class="left">
Left
</div>
<div class="divider">
</div>
<div class="right">
Right
</div>
</div>
&#13;
这是工作jsFiddle
答案 1 :(得分:2)
希望这有帮助,如果您需要任何解释,请告诉我......
.wrap {
border: 1px solid black;
background: url(https://images.unsplash.com/photo-1495480024026-9dd2033e4b63?dpr=1&auto=compress,format&fit=crop&w=1199&h=822&q=80&cs=tinysrgb&crop=&bg=);
height: 400px;
overflow: hidden;
position: relative;
}
.text {
width: 50%;
height: 100%;
position: relative;
z-index: 2;
}
.wrap:before {
content: '';
position:absolute;
width:50%;
height:400px;
border-right: 1px solid black;
transform: skewX(-15deg);
background: white;
z-index: 1;
}
.content {
z-index: 3;
background: white;
height: 100%;
width: 50%;
}
&#13;
<div class="wrap">
<div class="text">
<div class="content">
Lorem Ipsum...
</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
<html>
<head>
<style>
div
{
border:2px solid;
height: 300px;
width: 600px;
}
.divide
{
border:2px solid;
border-width: 0px 2px 0px 0px;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div>
<div class="divide">
</div>
</div>
</body>
</html>
这是你的盒子,将盒子分成两个