相邻的div有有角度的边界？ [英] Adjacent divs with angled borders?

问题描述

我想创建两个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屋！