содержание, которое имеет срез

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/