Question

我有一个设计here。我得到了1个div，里面有2个div，所以基本上这就是结构。

<div class="block">
<div class="slice1"></div>
<div class="slice2"></div>
</div>

如何为2个内容做切片？我无法为整个div使用整个背景图像，因为它不会对较小的窗口做出响应。这可能是使用边界半径吗？

在这里摆弄：demo

Answer 1

您可以使用CSS :after伪类，使用边框绘制三角形，向右浮动等等。我认为代码是不言自明的，但如果您有疑问，请告诉我：

.slice1:after {
    content:'';
    display:block;
    width:10px;
    height:200px;
    float:right;
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-bottom: 200px solid transparent;
    border-left: 30px solid blue;
    margin-right:-30px;
    position:relative;
}

一点点奖励：让它在响应中消失，使用@media选择器：

@media screen and (max-width: 500px) {
  .slice1, .slice2 {
    width:100%;
  }
  .slice1:after {
    display: none;
  }
}

http://jsfiddle.net/e85cLgra/2/

有切片的内容

1 个答案: