css трапециевидное изображение с прозрачным вырезом

Я хочу сделать трапециевидное изображение с помощью css. Я уже нашел какой-то код, но мне нужен код, который создает трапециевидную форму с прозрачной левой границей.

http://s28.postimg.org/ucfie0ctp/image.gif

Итак, здесь вы можете видеть, что левая граница изображения была обрезана. Я хочу сделать это с помощью css. Является ли это возможным?

Поэтому я хочу сделать снимок с мужчиной. Это простая картинка, и я хочу сократить левую границу. я пробовал это

<div class="trapezoidImg"></div>
.trapezoidImg
{ 
    position: absolute;
    overflow: hidden; 
    padding: 0; 
    margin-left: 100px; 
    display: inline-block; 
    width:510px; 
    height:200px;
    background:url('http://iskolaujsag.blathy-bp.hu/wp-content/uploads/2009/04/getattachment-2.jpg');
    background-position: center; 
    -o-background-size: 510px; 
    -moz-background-size: 510px; 
    background-size: 510px;
}

.trapezoidImg:after
{
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -50%;
   width      : 145%;
   height     : 80%;
   display    : block;
   background : rgb(51,51,59);   
    bottom: -90%;  
    -webkit-transform: rotate(55deg); 
    -moz-transform: rotate(55deg); 
    transform: rotate(53deg); 
}

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


html css css-shapes
person akos    schedule 18.08.2014    source источник
comment
.image{border-left: 2px сплошная прозрачная} или любой ширины, которую вы хотите   -  person Devin    schedule 18.08.2014
comment
@ Фабио, это вертикально, мне нужна граница, как вы видите изображение   -  person akos    schedule 18.08.2014
comment
формы CSS обычно используют вертикальную границу, чтобы получить эту форму. Если это не так, то вам нужно предоставить свой код (ну, на самом деле вы всегда должны предоставить его)   -  person Devin    schedule 18.08.2014
comment
Да, я знаю, но я не могу это предоставить, вот причина моего поста, я жду некоторых идей.   -  person akos    schedule 18.08.2014
comment
Опубликуйте код, который вы уже нашли.   -  person Jacob Gray    schedule 19.08.2014
comment
Иногда самое простое решение... это отредактировать изображение... это не ракетная хирургия   -  person Paulie_D    schedule 19.08.2014

Ответы (1)


arrow_upward
2
arrow_downward

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

С каждой стороны какой-то контент?

Вот свободная интерпретация вашего неясного вопроса, надеюсь, это заставит вас дать нам некоторую информацию пригодный для использования.

background: 
    url(http://i.stack.imgur.com/WJ3MT.png)   center  no-repeat,
    linear-gradient(47deg, tomato 50.1%, transparent 50%) left no-repeat,
    linear-gradient(47deg, transparent 50%, #333 50.1%) right no-repeat;
person G-Cyrillus    schedule 18.08.2014
comment
@HofmeisterÁkos, вы все еще можете использовать линейный градиент в своем элементе after и накладывать его на изображение :) - person G-Cyrillus; 19.08.2014
comment
я могу сделать фон, помидор, белый и темно-синий элементы, я хочу вырезать нижнюю левую часть изображения чем-то прозрачным, я хочу, чтобы он был частью ползунка, и я хочу изменить изображения, поэтому мне нужно вырезать их все, и я хочу сделать это с помощью css - person akos; 19.08.2014
comment
Навел на картинку, спасибо (думал будет сложнее.. :D ) - person akos; 19.08.2014