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

时间:2017-05-31 06:59:33

标签: html css html5 css3

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

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

3 个答案:

答案 0 :(得分:3)

您可以使用flexboxtransform属性。

这是一个解决方案



.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;
&#13;
&#13;

这是工作jsFiddle

答案 1 :(得分:2)

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

&#13;
&#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;
&#13;
&#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>

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