如何使用 CSS 创建这种有角度的条形 [重复]答案

【问题标题】：How to create this angled bar shape with CSS [duplicate]如何使用 CSS 创建这种有角度的条形 [重复]
【发布时间】：2017-01-27 01:27:33
【问题描述】：

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

这是我的html：

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

我怎样才能做到这一点，让两个条以这样的角度相交？

【问题讨论】：

请提供minimal reproducible example。

标签： html css

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案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>

【讨论】：