css - Cut the corner off of a responsive image -


i have image has corner cut off. image has responsive can grow , shrink page. image managed cms has have corner cut programmatically. client won't doing manually before uploading.

i've can use svg outline part of image need shown. unfortunately have give set path stops being responsive. tried creating pattern uses image fill path

<svg version="1.1" viewbox="0 0 242 282" preserveaspectratio="xminymin meet" class="svg-content">     <defs>         <pattern id="img1" patternunits="userspaceonuse" width="242" height="282" x="0" y="0">             <image xlink:href="http://placehold.it/242x282" x="0" y="0" width="242" height="282" />         </pattern>     </defs>     <path d="m 0 0 l 178 0 l 242 64 l 242 282 l 0 282 z" stroke="green" fill="url(#img1)"/> </svg> 

but doesn't work because have give absolute width , height. tried using clip-path never seemed work right.

does have ideas or insights might me out here?

here example of image needs like. enter image description here

why stop being responsive? long viewbox set correctly (as have done), can resize container (eg. <div>) holding svg , resize div.

for example, try resizing "result" box in following fiddle:

http://jsfiddle.net/bcjs9/


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -