Как я могу создать эту полосу с кругом?

Я пытаюсь создать стиль, используя CSS и HTML.

Мой стиль выглядит следующим образом:

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

Я попробовал это, и это мой 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>

Это мой 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;
}

Это было так близко к моему ожидаемому результату. Но не 100%.

JS FIDDLE

Ответы

Ответ 1

Мои два цента:

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;
}

Улучшенная поддержка браузера

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

Ответ 2

Вот мой выстрел в решение. Вам нужно переместить .front-number вне .download-file, чтобы он работал.

<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

Ответ 3

Вы можете получить полосу с эффектом круга с помощью radial-gradient также (как в нижеприведенном фрагменте).

Радиальные градиенты работают практически со всеми новейшими браузерами. Вы можете увидеть полную таблицу поддержки браузера здесь.

.download-content > .download-item > .download-file {
  float: right;
  width: 100%;
  background: #027bc6;
  background: radial-gradient(circle at 0% 50%, transparent 60px, #027bc6 60px);
}
.download-content > .download-item > .download-file > .front-number {
  float: left;
  height: 70px;
  width: 70px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 70px;
  color: #fff;
  background: none repeat scroll 0 0 #000;
  border: 5px solid #fff;
  border-radius: 50%;
}
.download-file p a {
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
span {
  color: #AAAAAA;
  font-weight: bold;
}
span.left {
  float: left;
  margin-left: 10px;
}
span.right {
  float: right;
  margin-right: 10px;
}
<!-- prefix free library to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<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 class='left'>2013-01-12</span><span class='right'>Format | Power Point</span></small>
    </div>
  </div>
</div>

Ответ 4

С CSS и HTML не точным, как изображение, данное кажется достижимым, но здесь я дал одно решение, надеюсь, оно вам поможет.

.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

Ответ 5

Я могу предложить вам "классический" подход с поплавком и статическим положением, divs, CSS, полями и т.д. Чтобы точно получить синюю форму, вы также можете использовать SVG или комбинацию div с радиусами CSS и т.д.

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

Что я сделал:

1) Я разделил фон на дополнительный div и содержимое, которое у вас было раньше. Div - синий и находится за текстом. Поскольку он имеет левый край, его край смещается ниже круга, и поэтому он получает свою форму.

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) По мере того, как новый фоновый блок сместит содержимое, я вытащил содержимое.

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

3) Установите line-height, чтобы иметь большое число по вертикали посередине.

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

4) Различные детали как вдохновение: цвет текста и т.д. Добавлены классы для прокрутки, оформление текста ссылок и т.д. и т.д.:

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;
}

Он также прокомментировал онлайн.

EDIT:

Удалено поле, которое не было необходимым, и добавило еще больше стилей CSS-шрифтов, чтобы имитировать как можно больше оригинала. Добавлен код вместе со ссылкой JS Bin.

Ответ 6

Там много ответов, но вот что я придумал.

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>

Ответ 7

Использование градиента и псевдоэлемента возможно

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);
}

Ответ 8

Демо

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;
}

Ответ 9

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