Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><code>border-radius</code> does allow some complex shapes, using it's extended syntax. For example:</p> <pre><code>border-radius:15px 25px 25px 15px / 15px 45px 45px 15px; </code></pre> <p>See <a href="http://jsfiddle.net/tDCaA/1/" rel="nofollow">http://jsfiddle.net/tDCaA/1/</a> for this in action. It's heading in the direction you're looking for, but doesn't quite achieve it.</p> <p>The trouble is that further tweaking doesn't get much closer -- with the straight lines you've got on the sample image, you're really not looking at a <code>border-radius</code> effect at all; it's a more complex shape than <code>border-radius</code> is designed to do. So my advice would be to stop focusing on <code>border-radius</code> as the answer here, and look for alternatives.</p> <p>So what alternatives are there? Here are a few you could try:</p> <ul> <li><p><strong>An SVG image</strong>. This example is a good case for an SVG image, as you've got a few little design elements in there like the white hole at the end of the tag which aren't easy to achieve in CSS.</p></li> <li><p><strong>A CSS triangle</strong>. Draw the end part of the tag using the old triangle hack with a CSS border. You may have trouble getting the corners rounded on this though.</p></li> <li><p><strong>Rotation</strong>. Create a second element (possibly using the CSS <code>:after</code> selector), that will act as the end piece of the tag. Then use CSS to rotate it 45 degrees to give it the required shape. To be honest though, I would consider using rotation for this to be overkill, and not great for browser performance. It should work though. And since we're already rotation, you could also use other transform effects to tweak it to the desired shape.</p></li> <li><p><strong>CSS <code>border-image</code></strong>. CSS also has a <code>border-image</code> property that can be used to do complex borders. Combined with SVG, this can be very powerful and can give you all the variable shaped borders you want. Most modern browsers support it now (<a href="http://caniuse.com/#search=border-image" rel="nofollow">http://caniuse.com/#search=border-image</a>).</p></li> <li><p><strong>An old-school background image</strong>. Don't be afraid of just using a plain png background image for this kind of thing. All the techniques above have their place, but background images work well and have compatibility with old browser versions. There's nothing wrong with using them for this kind of thing if the other solutions don't work for you.</p></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. POcreate a border-radius for div
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSpudley
    1. USSpudley
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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