进度条 箭头进度条的实现（伪元素的使用）

一.实现效果

进度条.gif

简易代码效果

进度条2.gif

二.完整代码

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3炫酷进度条动画|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
         .progress{
       height: 20px;
       background: #fff;
       border-radius:15px 0 0 15px;
       box-shadow:none;
       margin:20px 50px 40px 100px;
       overflow: visible;
       position: relative;
     }
     .progress .progress-title{
       position: absolute;
       left:-90px;
       font-size: 18px;
       font-weight: 700;
     }
     .progress .progress-value{
       position: absolute;
       right:-50px;
       font-size:18px;
       font-weight: 700;
       color:#205580;
     }
     .progress .progress-bar{
       background: #fff;
       box-shadow: none;
       border-radius:15px 0 0 15px;
       position: relative;
       -webkit-animation:animate-positive 2s;
       animation: animate-positive 2s;
     }
     .progress .progress-bar:before{
       content:"";
       position: absolute;
       top:-10px;
       right:-40px;
       border:20px solid transparent;
     }
     .pink .progress-bar:before{
       border-left:20px solid #ff4a98;
     }
     @-webkit-keyframes animate-positive{
            0% { width: 0; }
        }
        @keyframes animate-positive{
            0% { width: 0; }
        }
    </style>
</head>
<body>
  <div class="container">
    <div class="row text-center">
      <h1>进度条实例</h1>
    </div>
    <div class="row">
      <div class="progress pink">
        <div class="progress-title">HTML5</div>
        <div class="progress-value">90%</div>
        <div class="progress-bar" style="width:90%;background:linear-gradient(to right,#f791bd,#ff4a98);"></div>
      </div>
    </div>
  </div>
</body>
</html>

三.发现的问题

1.伪元素的使用

参考详细介绍的网址：https://www.cnblogs.com/ranzige/p/4554484.html

2.用伪元素实现三角形箭头

<html>
<head>
  <meta charset="utf-8" />
  <style>
    span{
      display: block;
      height: 30px;
      line-height: 30px;
      width:100px;
      text-align: center;
      background: #ccc;
      position: relative;
    }
    span::before{
      content:"";
      border:7px solid transparent;
      position: absolute;
      bottom:-14px;
      left:41px;
      border-top:7px solid red;
    }

  </style>
</head>
<body>
  <span>Hello world</span>
</body>
</html>