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

Question

我需要用html＆amp; amp;创建这个形状css，（忽略灰色边框）

这是我的html：

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

我怎么能这样做，让这两个柱子以这样的角度相遇？

Answer 1

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

来完成

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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>