CSS制作右边框对角线

时间:2016-10-18 02:54:02

标签: html css

如何使用css创建垂直倾斜线,如下所示?

enter image description here

1 个答案:

答案 0 :(得分:4)

尝试使用border

.progressbar{
  position: relative;
  overflow: hidden;
  height: 10px;
  background: #eee;
}
.progressbar > i{
  position: absolute;
  width: 60%;
  border-top:  10px solid #0bf;          /* same as parent height */
  border-right: 3px solid transparent;   /* diagonality :) */
}
<div class="progressbar"><i></i></div>