如何用圆圈创建此栏？

时间：2014-08-02 07:47:49

标签： html css css3 css-shapes

我正在尝试使用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

9 个答案:

答案 0 :(得分：25)

我的两分钱：

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

<强>悬停

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/

答案 1 :(得分：6)

这是我的解决方案。但是，您需要将.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

答案 2 :(得分：6)

您也可以使用radial-gradient来实现带圆圈效果的栏（如下面的代码段所示）。

径向渐变几乎适用于所有最新的浏览器。您可以看到完整的浏览器支持图表here。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

在代码段中，我还进行了以下更改，以使输出与相关图片匹配：

  • 添加line-height: 70px;（等于圆圈高度）以垂直居中数字
  • 进行了以下HTML和CSS更改，以定位和设置p和small内容。

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

答案 3 :(得分：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

答案 4 :(得分：2)

我可以为你提供一个经典的＆＃34;使用浮点和静态位置，div，CSS，边距等方法。为了精确地获得蓝色形状，您还可以使用SVG或具有CSS半径等的div组合。

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

它也在线评论。

修改

删除了一个不必要的框，并添加了更多的CSS字体装饰，以便尽可能地模仿原文。添加了代码以及JS Bin链接。

答案 5 :(得分：2)

有很多答案，但这就是我想出来的。

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>

答案 6 :(得分：2)

使用渐变和伪元素是可能的

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

答案 7 :(得分：1)

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

答案 8 :(得分：-1)

<small><span>2013-01-12</span><span style="float:right;padding-right:10px;"> Format  |  Power Point</span></small>
相关问题
最新问题