相邻的div有有角度的边界? [英] Adjacent divs with angled borders?
本文介绍了相邻的div有有角度的边界?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建两个div,它们彼此左右浮动,但是用一个倾斜的角度边界分开它们。我附上了一张图片来展示我的意思。
有人知道如果这样的东西可能与CSS(切断内容与溢出:隐藏我猜)
这些div需要包含被边框截断的图片,下面是一个示例:
解决方案
$ b
.left,.right {position:relative; height:100px; width:200px;背景:#000; float:left;}。left:after {content:''; line-height:0; font-size:0; width:0; height:0; border-top:100px solid#000; border-bottom:50px solid transparent; border-left:0px solid transparent; border-right:50px solid transparent; position:absolute; top:0; right:-50px;}。right {margin-left:60px; width:100px;}。right:before {content:''; line-height:0; font-size:0; width:0; height:0; border-top:50px solid transparent; border-bottom:100px solid#000; border-left:50px solid transparent; border-right:0px solid#000; position:absolute; top:-50px; left:-50px;}
< div class =左> < / div>< div class =right> < / div>
UPDATE 图片
.left ,.right {background:#000 url('http://lorempixel.com/300/100');位置:相对; height:100px; width:250px; float:left;}。left:after {content:''; line-height:0; font-size:0; width:0; height:0; border-top:50px solid transparent; border-bottom:100px solid #fff; border-left:30px solid transparent; border-right:0 solid #fff; position:absolute; top:-50px; right:0;}。right {background:#000 url('http://lorempixel.com/200/100'); width:150px;}。right:before {content:''; line-height:0; font-size:0; width:0; height:0; border-top:100px solid #fff; border-bottom:50px solid transparent; border-left:0px solid transparent; border-right:30px solid transparent; position:absolute; top:0; left:0;}
< div class = > < / div>< div class =right> < / div>
I want to create two divs which are floated left to each other, however with a slanted angled border separating them. I've attached a picture to demonstrate what I mean.
Does anyone know if something like this is possible with CSS (cutting off the content with an overflow:hidden I guess)
These divs need to contain images that get cut off by the border, here is an example :
解决方案
Try this
.left, .right {
position: relative;
height: 100px;
width: 200px;
background: #000;
float: left;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #000;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
position: absolute;
top: 0;
right: -50px;
}
.right {
margin-left: 60px;
width: 100px;
}
.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #000;
border-left: 50px solid transparent;
border-right: 0px solid #000;
position: absolute;
top: -50px;
left: -50px;
}
<div class="left"> </div>
<div class="right"> </div>
UPDATE with images
.left, .right {
background: #000 url('http://lorempixel.com/300/100');
position: relative;
height: 100px;
width: 250px;
float: left;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #fff;
border-left: 30px solid transparent;
border-right: 0 solid #fff;
position: absolute;
top: -50px;
right: 0;
}
.right {
background: #000 url('http://lorempixel.com/200/100');
width: 150px;
}
.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 0;
left: 0;
}
<div class="left"> </div>
<div class="right"> </div>
这篇关于相邻的div有有角度的边界?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文