Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well, I managed to do something similar, and it should be cross-browser supported ( after small edits ) :</p> <p><a href="http://jsbin.com/elubek/1/edit" rel="nofollow">http://jsbin.com/elubek/1/edit</a></p> <p>CSS:</p> <pre><code>div.wrapper { position: relative; width: 450px; } div.tag { width: 400px; padding: 3px 10px; height: 74px; background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); border-radius: 5px; position: absolute; top: 0; z-index: 120; } div.box1 { height: 62px; width: 62px; right: 0px; top: 9px; border-radius: 10px; z-index: -1; position: absolute; -webkit-transform: rotate(-45deg); background: -webkit-linear-gradient(top right, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%); float: right; } div.circle { width: 10px; height: 10px; position: absolute; z-index: 5; border-radius: 100px; background: white; right: 10; top: 35px; } p { font-family: 'Verdana'; color: white; margin: 0; } p.prgress-info { font-size: 25px; letter-spacing: -1px; padding-top: 10px; } p.deadline { padding-bottom: 19px; font-size: 12px; font-weight: normal; } p.deadline span { font-size: 14px; } </code></pre> <p>HTML: </p> <pre><code> &lt;div class='wrapper'&gt; &lt;div class='tag'&gt; &lt;p class="prgress-info"&gt;003. In progress&lt;/p&gt; &lt;p class="deadline"&gt;&lt;span&gt;7&lt;/span&gt;/ Deadline: 30 July 2013&lt;/p&gt; &lt;/div&gt; &lt;div class='box1'&gt;&lt;/div&gt; &lt;div class='circle'&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>You can play with <code>the height/width</code> of div.box1, to achieve the radius you want ;)</p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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