如何使用CSS创建这个带角度的条形

Question

我需要用html&css创建这个形状,(忽略灰色边框)

这是我的html:

<span class="bar-wrapper">
    <span class="bar first">&nbsp;</span><span class="bar last">&nbsp;</span>
</span>

我怎么能这样做,并让两个杆以这样的角度相遇？

Answer 1

你可以使用单个元素,伪元素和 transform: skew();

div {
  height: 1em;
  position: relative;
  overflow: hidden;
}

div:before, div:after {
  position: absolute;
  content: '';
  height: 100%;
  transform: skew(30deg);
}
div:before {
  width: 80%;
  left: -10%;
  background: #9fd256;
}
div:after {
  width: 40%;
  right: -10%;
  background: #5d7cb8;
}

<div></div>

Answer 2

可以通过操纵边框来制作三角形状,通过使边框的一个或多个边透明,您可以实现此目的.

编辑: 我推荐@MichaelCoker答案,因为它更容易定制

.bar{
  width: 200px;
  display: inline-block;
  border: 10px solid #000;
}
.bar.first{
  border-color: blue;
  border-right-color: transparent;
  border-top-width: 0;
}
.bar.last{
  border-bottom-width: 0;
  border-color: red;
  margin-left: -10px;
  border-left-color: transparent;
}

<div class="bar-wrapper">
    <div class="bar first"></div><div class="bar last"></div>
</div>