Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Using Transforms (so CSS3 solution only)</h2> <p>There is a small amount of imprecision in the following method, and it has two "coding" drawbacks:</p> <ol> <li>Two wrappers needed on the <code>img</code></li> <li>Need to know the size of the image (which may not always be a drawback if images are set sizes or if javascript is used to give width/height info).</li> </ol> <p>It does, however, degrade nicely back to square corners for IE8 and lower. </p> <p>The core idea is to size the outer wrapper and hide its overflow, properly size, rotate, and scale down the inner wrapper to create the chamfered corners (which also has overflow hidden), then reverse the rotation and scale back up, and reposition if needed the <code>img</code> nested inside. The method is robust enough to get some fairly decent borders set up if desired, though the rendering of such borders on browsers varies as to quality.</p> <h2><a href="http://jsfiddle.net/ySQdn/48/" rel="noreferrer">Here's the fiddle.</a></h2> <p><strong>HTML (basic form)</strong></p> <p>The <code>span</code> could be a <code>div</code>.</p> <pre><code>&lt;span class="chamfer"&gt; &lt;span&gt; &lt;img src="http://placehold.it/351x151" /&gt; &lt;/span&gt; &lt;/span&gt; </code></pre> <p><strong>CSS (basic form)</strong></p> <pre><code>.chamfer { overflow: hidden; display: inline-block; /* could be "block" */ margin: 25px; /* for demo only */ /* Because of the rotations following, it seems like an odd number in width and height worked more consistently, as it gives a "middle" pixel by which to transform the rotation off of */ width: 351px; /* width of image */ height: 151px; /* height of image */ } .chamfer &gt; span { overflow: hidden; display: inline-block; /* could be "block" */ -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; /* The rotation gets the chamfer angle the scale sets the "size" of the cut though not very precisely (exact px height is not possible to set explicitly. */ -moz-transform: rotate(45deg) scale(.9); -webkit-transform: rotate(45deg) scale(.9); -o-transform: rotate(45deg) scale(.9); -ms-transform: rotate(45deg) scale(.9); transform: rotate(45deg) scale(.9); /* top/bottom padding is image width (351px) minus the image height (151px) = 200px divided by 2; if the image were taller than wide, then this would become (iH - iW) / 2 for the left/right padding */ padding: 100px 0; margin-top: -100px; /* adjust for the padding */ /* the following helped "square" the item better */ width: 100%; height: 100%; } .chamfer img { display: inline-block; /* could be "block" */ -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; /* The rotation is reversing the wrapper rotation to put the image horizontal again, while the scale is the inverse of the wrapper's scale, so here it is ( 1 / 0.9 ) = 1.11, to scale the image back up to correct size */ -moz-transform: rotate(-45deg) scale(1.11); -webkit-transform: rotate(-45deg) scale(1.11); -o-transform: rotate(-45deg) scale(1.11); -ms-transform: rotate(-45deg) scale(1.11); transform: rotate(-45deg) scale(1.11); } </code></pre> <p><strong>HTML (smaller chamfer with 2px border)</strong></p> <p>See the above fiddle for a "larger" chamfer with 10px border version as well.</p> <p>Of course, if all your images were getting a set sized border, you would just make this just like your base html above, and not do override classes as I have here.</p> <pre><code>&lt;span class="chamfer small b2"&gt; &lt;span&gt; &lt;img src="http://placehold.it/351x151" /&gt; &lt;/span&gt; &lt;/span&gt; </code></pre> <p><strong>CSS (overrides the basic css above)</strong></p> <p>See the above fiddle for a "larger" chamfer with 10px border version as well.</p> <p>Of course, if all your images were getting a set sized border, you would just make these the values of your base css, and not do it in separate classes as defined here.</p> <pre><code>.b2 * { border: 2px solid black; } .chamfer.b2 { /* 2px border */ width: 355px; /* 4px added for the 2px border */ height: 155px; /* 4px added for the 2px border */ } .chamfer.b2 &gt; span { margin-top: -102px; /* the extra 2px is to accomodate top border of 2px */ margin-left: -2px; /* this is for the 2px left border */ } .chamfer.small &gt; span { /* changed the scale for a smaller cut */ -moz-transform: rotate(45deg) scale(.96); -webkit-transform: rotate(45deg) scale(.96); -o-transform: rotate(45deg) scale(.96); -ms-transform: rotate(45deg) scale(.96); transform: rotate(45deg) scale(.96); } .chamfer.small img { /* scale changed on wrapper to .96 so scale changes on image to ( 1 / 0.96 ) = 1.042. */ -moz-transform: rotate(-45deg) scale(1.042); -webkit-transform: rotate(-45deg) scale(1.042); -o-transform: rotate(-45deg) scale(1.042); -ms-transform: rotate(-45deg) scale(1.042); transform: rotate(-45deg) scale(1.042); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POClipping or chamfering corners of image to see background
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USScottS
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POClipping or chamfering corners of image to see background
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COBrilliant solution, even though it requires the wrappers, it is brilliant.
      singulars
      1. PO
      1. USJoó Ádám
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload