如何製作一個劃分盒子的線

我有一個問題，我怎麼能用CSS來做這個盒子的劃分？就像我在下面的圖片中呈現的一樣。如何製作一個劃分盒子的線

2017-05-31 Juan David

盒請添加你所第一次嘗試代碼。 – frnt

@frnt我沒有代碼，我不知道該怎麼做，所以我在尋找幫助:( –

希望這會有所幫助，讓我知道，如果你需要任何解釋......

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

<div class="wrap"> 
 
    <div class="text"> 
 
    <div class="content"> 
 
     Lorem Ipsum... 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-31 07:12:52 Robert

您可以使用flexbox和transform性能。

這裏有一個解決方案

.container{ 
 
\t display: flex; 
 
\t width: 400px; 
 
\t height: 200px; 
 
\t border: 1px solid gray; 
 
} 
 
.left, .right{ 
 
\t flex: 1; 
 
\t text-align: center; 
 
} 
 
.divider{ 
 
\t width: 1px; 
 
    background: gray; 
 
    transform: rotate(6deg); 
 
}

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

這裏是工作jsFiddle

來源

2017-05-31 07:06:31

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

這裏是把你的箱子兩

來源

2017-05-31 07:25:54 MageNative

如何製作一個劃分盒子的線

回答

相關問題