如何用圆圈创建这个栏？

【问题标题】：How can I create this bar with a circle?如何用圆圈创建这个栏？
【发布时间】：2015-08-09 19:31:44
【问题描述】：

我正在尝试使用 CSS 和 HTML 创建样式。

我的风格是这样的：

我试过了，这是我的 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

【问题讨论】：

    标签： html css css-shapes


    【解决方案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 | ";
}

    悬停

    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/

    【讨论】：

    • 清洁解决方案..如何更改悬停背景颜色？在这种情况下，我需要将鼠标悬停在内容 div（蓝色 div）上时设置为黑色，并且还需要更改为蓝色圆圈的蓝色...
    • DONE!，检查一下（顺便说一句，我的文件名很长，并添加了数字和格式字）。
    • 太棒了...浏览器支持怎么样？
    • 忘记 MSIE caniuse.com/#search=transition) 中的过渡，并且伪元素上的悬停更改需要某些浏览器的解决方法（不确定 :: 支持），您将需要背景图像解决 MSIE caniuse.com/#search=border-radius) 上的边界半径，以及一些供应商前缀。
    • 无论如何，主要的东西（布局）有一个很好的支持，甚至柜台也是一个好主意（caniuse.com/#search=counter）。您可以使用 js polyfill 替换动画，使用圆形背景图像替换边框半径（我不喜欢渐变，抱歉）。
    【解决方案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

    【讨论】：

    • 我正在使用less CSS 并且混淆了如何在此处声明此规则....download-content &gt; .download-item &gt; * { position: absolute; }
    • LESS 应该向后兼容常规 CSS。
    • @user3733831 LESS 只是一种让 css 更短的方法。它编译为css。所以.. 只需将上述内容放在一个文件中并将其包含在您的页面中，就像您执行任何 css 文件一样。
    【解决方案3】：

    您也可以使用radial-gradient 来实现带有圆形效果的条形图（如下面的sn-p）。

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

    .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>

    在sn-p中，我还做了如下改动，使输出与有问题的图像匹配：

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

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

    【讨论】：

      【解决方案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

      【讨论】：

      • 添加margin: -2px;到前面的号码
      【解决方案5】：

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

      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】：

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

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

        【讨论】：

        • 适用于我...在 Chrome 中。添加了 mox 前缀。
        【解决方案7】：

        我可以为您提供一种“经典”方法，包括浮动和静态位置、div、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;
}

        网上也有评论。

        编辑：

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

        【讨论】：

          【解决方案8】：

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

          【讨论】：

            【解决方案9】： 
            <small><span>2013-01-12</span><span style="float:right;padding-right:10px;"> Format  |  Power Point</span></small>

            【讨论】：

              猜你喜欢
              • 1970-01-01
              • 2019-07-19
              • 1970-01-01
              • 2016-01-27
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2023-03-17
              • 1970-01-01
              相关资源
              最近更新 更多
              热门标签
              Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode