html - css trapezoid image transparent cut -
i want make trapezoid image css. i've found code, want code makes trapzeoid shape transparent left border.
so here can see that, left border of image has been cut down. want css. possible?
so want make picture man. simple picture , want cut down left border. tried
<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); }
and works :after tag must have color, want transparent one, if set transparent, image wont cut. , reason why dont want edit images in photeditor, going slider, , dont want edit of images.
without code , tips of want in end, can go idea of gradient , image mixed in background of container.
on each side content ?
here free interpretation of unclear question, hopping make give info usable.
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;
Comments
Post a Comment