Question

大家好我试图将水平条改为垂直条，但我无法做到。酒吧有2种颜色绿色和红色。它水平工作，但不应该。我希望有人可以帮助我。

HTML

<div class="col-sm-12 col-xs-12"> <div class="progress binary-progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%"> </div> </div> </div>

的

CSS

.binary-progress {
    background: #f27271;
    display: flex;
    align-items: flex-end;
    float: left;
    min-height: 80%;
    width: 20px;
    margin: 0px;
    margin-top: 13px;
    margin-right: 20px;
    border: 1px solid #000;
    border-radius: 4px 4px 4px 4px;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15)    25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}
.binary-progress .progress-bar {
    background-color: #92c47d;
}

感谢您的时间。

Answer 1

您可以使用CSS3 transform将条形旋转90度。

不确定这是否是你想要的，但我希望它有所帮助：

.binary-progress {
  transform: rotate(90deg);
  transform-origin: left top;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body>
  <div class="col col-4">
    <div class="progress binary-progress">
      <div class="vertical progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      </div>
    </div>
  </div>
</body>

使用css将水平条形变为垂直条形

1 个答案: