CSS вырезать изображение фона прозрачного

Question

мне нужно получить от CMS изображения и использовать в следующем разделе, бок о боке с рекламным текстом (серое пространство), но я не имею ни малейшего представления, как создать следующий эффект:

Как вы можете видеть, квадрат начинается в верхней части левой стороны и идет немного вниз до правой стороны, в левой стороне мы имеем обратный пример эффекта, который мне нужен.

Примечания:

• Исходное изображение с CMS представляет собой квадрат, мне нужно создать «вырезать» эффекта с помощью CSS, если это возможно
• Решение должны быть совместимы с IE9 +, FF, хром.

Answer 1

Потому что вам нужно фоновое изображение, и я предполагаю, что вы хотите, чтобы текст плавал над серой частью, вам нужно сделать что-то отличное от того, что было предложено @seanlevan.

Я добавил несколько фоновых изображений и текст для демонстрационных целей.

/* IE9+ http://caniuse.com/#feat=transforms2d */ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
html, body { 
 
    min-height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://lorempixel.com/output/city-q-c-1200-800-9.jpg); 
 
    background-size: cover; 
 
} 
 

 

 
.wrapper { 
 
    padding-top:50px; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    max-width: 750px; 
 
    min-width: 500px; 
 
    margin:0 auto; 
 
} 
 
.skew-container { 
 
    position: relative; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    -webkit-transform: skewY(2.5deg); 
 
    -moz-transform: skewY(2.5deg); 
 
    -ms-transform: skewY(2.5deg); 
 
    -o-transform: skewY(2.5deg); 
 
    transform: skewY(2.5deg); 
 
} 
 
.skew-container:before { 
 
    content:''; 
 
    position: absolute; 
 
    right: 50%; 
 
    top: 0; 
 
    left:0; 
 
    bottom:0; 
 
    background-image: url(http://lorempixel.com/output/food-q-c-800-600-3.jpg); 
 
    background-size: cover; 
 
    background-position: bottom left; 
 
    z-index: -1; 
 
} 
 
.skew-container:after { 
 
    content:''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color: #ccc; 
 
    z-index: -1; 
 
} 
 
.text { 
 
    width: 50%; 
 
    float: left; 
 
    padding: 2em; 
 
    margin-left: 50%; 
 
    -webkit-transform: skewY(-2.5deg); 
 
    -moz-transform: skewY(-2.5deg); 
 
    -ms-transform: skewY(-2.5deg); 
 
    -o-transform: skewY(-2.5deg); 
 
    transform: skewY(-2.5deg); 
 
}

<div class="wrapper"> 
 
    <div class="skew-container"> 
 
     <div class="text"> 
 
      <h2>San Fran Flatbread &amp; Sauce</h2> 
 
      <p>Bacon ipsum dolor amet picanha pariatur in jowl. Prosciutto tongue cupidatat ex. Rump swine sausage shank ribeye ex minim consequat magna chuck meatball kevin pork chop in. Pariatur minim bacon tongue, sausage ut veniam cupim short loin.</p> 
 
      <a href="#">Get the recipe</a> 
 
     </div> 
 
    </div> 
 
</div>

Так в основном, как это работает в том, что косо-контейнер имеет фиксированную высоту, которая немного больше, чем его обертки контейнера. Добавив несколько верхних отступов, чтобы оболочка установила переполнение в скрытое состояние, вы можете вытащить контейнер с перекосом так, чтобы нижняя часть div была скрыта, давая ему плоское дно.

Далее я использовал два псевдоэлемента для заполнения контейнера, но вам не нужно создавать их псевдоэлементы, если вы хотите иметь большую гибкость для добавления изображений динамически с помощью встроенного стиля (example here). Каждая из них составляет 50% ширины основного контейнера. Располагая их абсолютно, их можно разложить бок о бок. С z-индексом -1, они будут за текстом.

Наконец, вы хотите отменить перекос на текстовом div, используя отрицательные значения перекоса. Я дал текстовому контейнеру ширину в 50%, поместил его влево и использовал крайний левый 50%, чтобы компенсировать его, чтобы он поместился в правой серой области.

Answer 2

Я сомневаюсь, что это было выполнено в чистом CSS, он скорее использовал фоновое изображение с прозрачностью для достижения этого эффекта. Я видел эффект разреза, используемый во многих случаях.

Однако я будет создать версию CSS и разместить его здесь, потому что это очень возможно.

Вот пример этого, используя свойство skew CSS3, что я только что запрограммированный:

http://jsfiddle.net/35s9dk25/7/

Это может быть скорректирована в соответствии с вашими потребностями.

Отметьте этот ответ как правильный, если он поможет.