创建有角度的彩色横幅

您好，我正在尝试在 HTML 和 CSS 中创建以下斜条外观：

只是蓝色和紫色区域，后面是白色。

我显然可以看到如何使用图像来做到这一点，但是仅 HTML/CSS 又如何呢？

这可能吗？

它在网站上使用 - www.africa.dating

我知道我应该有更多示例代码，但实际上我不知道从哪里开始，所以我只有以下 HTML：

Fiddle: http://jsfiddle.net/e2dr5udr/3/ http://jsfiddle.net/e2dr5udr/3/

<div id="container">
    <div id="blue"></div>
    <div id="purple"></div>
</div>

#container {
    width: 100%;
    height: 100px;
    background-color: white;
    position: absolute;
}

#blue {
    width: 100%;
    height: 100px;
    background-color: blue;
    position: absolute;
} 

#purple {
    width: 100%;
    height: 100px;
    background-color: purple;
    position: absolute;
}

thankyou

您可以使用伪元素还有一些边境操纵.

这将允许您仅使用单个元素来创建它，以创建以下内容：

.title {
  height: 1px;
  background-color: transparent;
  border-bottom: 170px solid blue;
  border-right: 170px solid transparent;
  width: 190px;
  position:relative; 
}

.title:after{
  content:"";
  position:absolute;
  height: 1px;
  top:0px;
  background-color: transparent;
  border-bottom: 170px solid purple;
  border-right: 170px solid transparent;
  width: 210px;
  z-index:-1;
  }

<div class="title"></div>

如果您不想使用这种方法，可以查看替代方法（使用背景渐变）here https://stackoverflow.com/a/27601802/3436942

使用 SkewX：

div{
  position:relative;
  height:15vh;
  width:60vw;
  overflow:hidden;
  }
div:before{
  z-index:-1;
  content:"";
  position:absolute;
  top:0;
  height:100%;
  right:50%;
  width:150%;
  border-right:10px solid green;
  background:cornflowerblue;
  -webkit-transform:skewX(45deg);
  transform:skewX(45deg);
  }

<div>123</div>