Ubuntu HTML5 UI SDK

  1. Bug #1243396
  2. Comment #3

Comment 3 for bug 1243396

Revision history for this message
Stuart Langridge (sil) wrote :

It may be easier to just use border-radius, which means that the browser engine does all the work.

See http://jsbin.com/taliqapu/1/edit for a live example, or the code as pasted below. Border-radius comes very, very, very close to perfectly approximating the Ubuntu Shape, and perhaps a fraction more tweaking of the radii chosen could make it even closer.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body { font-family: Ubuntu, sans-serif; }
    div {
      border: 1px solid red;
      padding: 20px;
      box-sizing: border-box;
    }
    div.one {
      border-radius: 20%;
      width: 238px;
      height: 221px;
    }
    div.two {
      border-top-left-radius: 18% 15%;
      border-top-right-radius: 18% 15%;
      border-bottom-left-radius: 18% 15%;
      border-bottom-right-radius: 18% 15%;
      width: 238px;
      height: 238px;
    }
    div.one, img.one { position: absolute; top: 100px; left: 100px; }
    div.two, img.two { position: absolute; top: 500px; left: 100px; }
  </style>
</head>
<body>
  <h1>The Ubuntu shape, as border radius</h1>
  <img class="one" src="http://design.canonical.com/wp-content/uploads/1-ubuntu-shape.jpg">
  <div class="one">Using a single border radius (and the example shape from <a href="http://design.canonical.com/2013/10/indented-styles-and-the-ubuntu-shape/">a design team blog post</a>)</div>

  <img class="two" src="http://design.canonical.com/wp-content/themes/design-blog-theme/assets/img/team-squircle.png">
  <div class="two">Using two radii for an elliptical border (and a different example shape)</div>
</body>
</html>