How can I create this bar with a circle using CSS and HTML?

Question

I am trying to create a style using CSS and HTML.

My style is like this:

button with a rectangle on the right and an overlaying circle on the left

I tried it and this is my HTML

  <div class="download-content">
   <div class="download-item">
     <div class="download-file">
        <div class="front-number">1</div>
        <p><a href="">Financial Ratio Analysis</a></p>
        <small><span>2013-01-12</span><span>Format | Power Point</span></small>
     </div> 
   </div>
  </div>

This is MY CSS :

.download-content > .download-item > .download-file {
    background: #027bc6;
    float: right;
    width: 100%;
}

.download-content > .download-item > .download-file > .front-number {
    background: none repeat scroll 0 0 #000;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    width: 70px;
}

It was so close to my expected result. But not 100%.

JS FIDDLE

Can anybody help me regarding this?

Thank you.

coma · Accepted Answer · 2014-08-02 12:22:05Z

My two cents:

http://jsfiddle.net/coma/jBx76

HTML

<div class="files">
    <a href="#">
        <div>
            <div class="name">Financial Ratio Analysis</div>
            <div class="meta">
                <div class="date">2014-08-25</div>
                <div class="format">Word</div>
            </div>
        </div>
    </a>
    <a href="#">
        <div>
            <div class="name">Financial Ratio AnalysisFinancial Ratio Analysis (this name is so so so long long long long long long)</div>
            <div class="meta">
                <div class="date">2014-08-25</div>
                <div class="format">PDF</div>
            </div>
        </div>
    </a>
</div>

CSS

html {
    font-family: Arial, Helvetica, sans-serif;
}

div.files {
    position: relative;
    display: block;
    padding: 4px 4px 4px 0;
    text-decoration: none;
    counter-reset: file;
}

div.files a {
    position: relative;
    display: block;
    padding: 4px 4px 4px 62px;
    text-decoration: none;
    counter-increment: file;
}

div.files a:before {
    content: counter(file);
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 68px;
    height: 68px;
    border: 5px solid #fff;
    background-color: #000;
    border-radius: 50%;
    text-align: center;
    line-height: 72px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
}

div.files div {
    line-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.files a > div {
    padding: 14px 14px 14px 28px;
    background-color: #017BC6;
}

div.files .name {
    margin: 0 0 14px 0;
    font-size: 18px;
    color: #fff;
}

div.files .meta {
    font-size: 14px;
    color: #bebfba;
    font-weight: bold;
}

div.files .meta:after {
    content: "";
    display: block;
    clear: both;
}

div.files .date {
    float: left;
}

div.files .format {
    float: right;
}

div.files .format:before {
    content: "Format | ";
}

Hover

http://jsfiddle.net/coma/jBx76/4/

div.files a > div,
div.files a:before {
    transition: background-color 350ms;
}

div.files a:hover > div {
    background-color: #000;
}

div.files a:hover::before {
    background-color: #017BC6;
}

Better browser support

http://jsfiddle.net/coma/jBx76/5/

Clean solution.. how to change hover bg color? In this case I need to set to black when hover on content div (blue color div) and also need to change to blue of the bulet circle... — user3733831, 12 hours ago
DONE!, Check it out (btw, mine handles very long file names and adds the number and the format word). — coma, 12 hours ago
Forget about transitions in MSIE < 10 (caniuse.com/#search=transition) and the hover change on the pseudo element needs a workaround for some browsers (not sure about the :: support), you will need a background image to solve the border-radius on MSIE < 9 (caniuse.com/#search=border-radius) and well, some vendor prefixes in general. — coma, 12 hours ago
Anyway, the main thing (the layout) has a good support and even the counter is a good idea (caniuse.com/#search=counter). You can replace the animations using a js polyfill and the border-radius using a circle background image (I don't like gradients, sorry). — coma, 12 hours ago

DJDavid98 · Answer 2 · 2014-08-02 08:05:27Z

Here's my shot at a solution. You need to move .front-number outside .download-file for it to work, though.

<div class="download-content">
    <div class="download-item">
        <div class="front-number">1</div>
        <div class="download-file">
            <p><a href="">Financial Ratio Analysis</a></p>
            <small><span>2013-01-12</span><span>Format | Power Point</span></small>
        </div>
    </div>
</div>

.download-content > .download-item {
    position: relative;
    height: 80px
}
.download-content > .download-item > * {
    position: absolute;
}
.download-content > .download-item > .front-number {
    background: none repeat scroll 0 0 #000;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    width: 70px;
    z-index: 2;
}
.download-content > .download-item > .download-file {
    background: #027bc6;
    width: calc(100% - 110px);
    height: 78px;
    top: 1px;
    left: 45px;
    padding-left: 50px;
    padding-right: 15px;
}
.download-content > .download-item > .download-file  p,
.download-content > .download-item > .download-file a {
    color: #fff;
    text-decoration: none;
}
.download-content > .download-item > .download-file  p {
    font-size: 22px;
    margin: 10px 0px;
}
.download-content > .download-item > .download-file  small {
    height: 1em;
    line-height: 1em;
    display: block;
}
.download-content > .download-item > .download-file  small span:first-child {
  float:left;
}
.download-content > .download-item > .download-file  small span:last-child {
  float:right;
}

JSBin

I am using less CSS and confusing how to declare this rule there... .download-content > .download-item > * { position: absolute; } — user3733831, 13 hours ago
@user3733831 LESS is just a way of making css shorter. It compiles to css. So.. just put the above in a file and include it on your page, like you do any css file. — Daedalus, 13 hours ago

Harry · Answer 3 · 2014-08-02 09:13:13Z

You can achieve this effect by using a radial gradient also like below:

.download-content > .download-item > .download-file {
    background: #027bc6;
    float: right;
    width: 100%;
    background: -webkit-radial-gradient(0% 50%, circle, transparent 60px, #027bc6 60px);
    background: radial-gradient(circle at 0% 50%, transparent 60px, #027bc6 60px);
}

Demo | Radial Gradients - MDN Reference

Browser Compatibility Check - Works on almost all latest browsers. Tested in Chrome v24, Firefox v19, Safari v5.1.7 (on Windows).

Fully Styled Version: In this demo all the other elements are also styled to resemble your original screenshot.

line-height: 70px; (equal to the circle height) was added to vertically center the number
The following HTML and CSS changes were done to position and style your p and small contents.

HTML:

<span class='left'>2013-01-12</span><span class='right'>Format | Power Point</span>

CSS:

.download-file p a{
    padding-left: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
}
span{
    color: #AAAAAA;
    font-weight: bold;
}
span.left{
    float: left;
    margin-left: 10px;
}
span.right{
    float: right;
    margin-right: 10px;
}

Sid · Answer 4 · 2014-08-02 08:01:54Z

up vote 1 down vote

With CSS and HTML not exact like as image given is seems to be achievable, but here i given one solution hope it will helps you.

.download-content > .download-item > .download-file {
    background: #027bc6;
    float: right;
    width: 100%;
    border-radius:48px 0px 0px 48px;
}

.download-content > .download-item > .download-file > .front-number {
    background: none repeat scroll 0 0 #000;
    border: 10px solid #fff;
    border-radius: 50%;
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: bold;
    height: 70px;
    text-align: center;
    width: 70px;
    line-height:68px;
    margin: -2px;
}

JsFiddle

answered 14 hours ago

Sid
691212

add margin: -2px; to front number – Royi Namir 14 hours ago

jsfiddle.net/4HP3f/3 – Royi Namir 14 hours ago

@RoyiNamir Added in answer, thanks for help! – Sid 14 hours ago

add a comment |

EternalHour · Answer 5 · 2014-08-02 08:27:51Z

There's a lot of answers, but here's what I came up with.

jsbin

CSS:

.download-content > .download-item > .download-file {
    background: #027bc6;
    float: right;
    width: 60%;
    position: relative;
    padding: 0 0 0 60px;
}

.download-content > .download-item > .download-file > .front-number {
    background: none repeat scroll 0 0 #000;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: bold;
    line-height: 70px;
    height: 70px;
    text-align: center;
    width: 70px;
    position: absolute; left: -25px; top: -4px;
}

.download-file {
  height: 70px;
}

.download-file p {
  margin: 5px 0 10px 0;
}

.download-file > p > a {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}

.details {
  display: inline-block;
  color: #c0c0c0;
  margin: 0 20px 0 0;
}

.left {
  font-weight: bold;
}

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>


  <div class="download-content">
   <div class="download-item">
     <div class="download-file">
        <div class="front-number">1</div>
        <p class="title"><a href="">Financial Ratio Analysis</a></p>
        <div class="details left">2013-01-12</div>
       <div class="details">Format | Power Point</div>
     </div> 
   </div>
  </div> 
</body>
</html>

RRR · Answer 6 · 2014-08-02 09:05:40Z

up vote 1 down vote

<small><span>2013-01-12</span><span style="float:right;padding-right:10px;"> Format  |  Power Point</span></small>

edited 13 hours ago

answered 13 hours ago

RRR
153

add a comment |

peter_the_oak · Answer 7 · 2014-08-02 09:34:02Z

I can offer you a "classical" approach with float and static position, divs, CSS, margins etc. In order to get the blue shape precisely, you could also use SVG or a combination of divs with CSS radiuses etc.

http://jsbin.com/cuvitixa/3/edit

What have I done:

1) I separated the background into an additional div and the content you've had before. The div is blue and is behind the text. As it has a margin-left, its edge is shifted below the circle and so it gets its shape.

HTML:
<div class="download-item">
  <div class="download-item-bg">&nbsp;</div>
  ...

CSS:
.download-item-bg {
  float: left;
  width: 280px;
  height: 80px;
  margin-left: 56px;
  background: #027bc6;
  padding-right: 10px;
}

2) As the new background box shifts down the content, I've pulled the content up.

.download-file {
  float: left;
  margin-top: -80px; /* pull the content over the blue background */
}

3) Set line-height in order to have the big number vertically in the middle.

.download-content > .download-item > .download-file > .front-number {
  ...
  height: 70px;
  line-height: 70px; /* set the number in the middle */
  ...

4) Different details just as an inspiration: Text color etc. Added classes to the spans, link text decoration etc etc:

HTML:
<span class="subtext bold">2013-01-12</span>
<span class="subtext pull-right">Format | Power

CSS:
.subtext {
  color: #dddddd;
  font-family: verdana;
  font-size: 0.7em;
  float: left;
}

.bold {
  font-weight: bold;
}

.pull-right {
  float: right;
}

...

.download-content > .download-item > .download-file a {
   font-family: verdana; /* Similar :-) */
   text-decoration: none;
   color: white;
}

It's also commented online.

EDIT:

Removed a box that was not necessary and added more CSS font decoration in order to imitate as much as possible the original. Added code along with the JS Bin link.

Include your code in the answer; link rot reasons. – Daedalus 13 hours ago — Daedalus, 13 hours ago
Thx for the hint. I edited the answer. – peter_the_oak 12 hours ago — peter_the_oak, 12 hours ago

Paulie_D · Answer 8 · 2014-08-02 08:33:23Z

Using a gradient and pseudo element it is possible

JSFiddle Demo

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    text-align: center;
}
.download-file {
    margin: 25px;
    display: inline-block;
}

.download-file > .front-number {
    background: none repeat scroll 0 0 #000;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 40px;
    font-weight: bold;
    height: 70px;
    line-height: 70px;
    text-align: center;
    width: 70px;
    vertical-align: top;
}
.box {
    display: inline-block;
    vertical-align: top;
    height:70px;
    color:white;
    background: blue;
    margin-left: 35px;
    position: relative;
}
.box:before {
    content:"";
    position: absolute;
    left:0;
    top:0;
    width:70px;
    height:70px;
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
background-image: -webkit-radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
background-image: -moz-radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
    background-image: radial-gradient(left center, circle, transparent 0%, transparent 50%, blue 50%, blue);
}

Works for me...in Chrome. Added mox prefix. – Paulie_D 13 hours ago — Paulie_D, 13 hours ago

4dgaurav · Answer 9 · 2014-08-02 09:20:10Z

Demo

html

<div class="circ">1</div>
<div class="rect">
    <p class="title">Financial Ratio Analysis</p>
    <p class="left">2013-01-12</p>
    <p class="right">Format | Power Point</p>
</div>

css

body {
    font-family: calibri;
}
.circ {
    text-align: center;
    font-size: 36px;
    line-height: 72px;
    color: white;
    width: 74px;
    height: 74px;
    border-radius: 100%;
    background: #000;
    display: inline-block;
    z-index: 11;
    position: relative;
    vertical-align: middle;
}

.rect { 
    color: white;
    margin-left: -40px;
    width: 300px;
    height: 80px;
    background: #00f;
    position: relative; 
    display: inline-block;
    z-index: 1;
    vertical-align: middle;
}
.rect:before {
    content:"";
    width: 40px;
    height: 80px;
    background: #fff;
    border-radius: 0 40px 40px 0;
    position: absolute;
    top:0;
    left:0;
}
p {
    margin:10px 5px 2px 50px;
}
.title {    
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
}
.left {
    float: left;
    font-size: 14px;
    font-weight: bold;
    color: #aaa;
}
.right {
    float: right;
    font-size: 14px;
    font-weight: bold;
    color: #aaa;
}

asked	today
viewed	397 times
active	today

current community

your communities

more stack exchange communities

How can I create this bar with a circle using CSS and HTML?

9 Answers 9

Your Answer

Not the answer you're looking for? Browse other questions tagged html css css-shapes or ask your own question.

Visit Chat

Hot Network Questions

current community

your communities

more stack exchange communities

How can I create this bar with a circle using CSS and HTML?

9 Answers 9

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged html css css-shapes or ask your own question.

Visit Chat

Related

Hot Network Questions