Question

我有一个问题，我如何用css对这个盒子进行划分？像我在下图中看到的东西。

http://saavorapi.parkeee.net/API/KitchenService.svc/DishInsertUpdate

Answer 1

您可以使用flexbox和transform属性。

这是一个解决方案

＆＃13;

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

＆＃13;

<div class="container">
	<div class="left">
		Left
	</div>
	<div class="divider">
	
	</div>
	<div class="right">
		Right
	</div>
</div>

＆＃13;

这是工作jsFiddle

Answer 2

希望这有帮助，如果您需要任何解释，请告诉我......

＆＃13;

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

Answer 3

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

这是你的盒子，将盒子分成两个

如何制作一个分隔一个方框的线

3 个答案: