Question

您好我正在尝试在HTML＆amp;中创建以下Angled Strip Look CSS：

enter image description here

只有蓝色和紫色区域有白色。

我显然可以看到如何使用图像，但仅限于HTML / CSS？

这可能吗？

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

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

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

三江源

Answer 1

您可以使用伪元素和一些边框操作。

这将允许您只使用一个元素创建它，以创建它：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您不想使用此方法，可以查看替代方法（使用背景渐变）here

使用SkewX：

＆＃13;

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

＆＃13;

<div>123</div>

＆＃13;

Answer 2

使用一个元素的另一种方法，即斜率右侧的skewX()属性，透明度使用rgba()背景颜色和伪元素上的边框：

<强> DEMO

＆＃13;

div{
    height:100%;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    top:0; right:0;
    width:100%; height:100%;
    background-color: rgba(90, 74, 199, .8);
    border-right:40px solid rgba(173, 96, 223, .8);
    
    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;
    
    -webkit-transform:skewX(30deg);
    -ms-transform:skewX(30deg);
    transform:skewX(30deg);
}


/******  FOR THE DEMO  *******/

html, body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
    margin:0;padding:0;
    height:100%;

＆＃13;

<div></div>

＆＃13;

Answer 3

以下是您想要的演示：http://jsfiddle.net/shivanraptor/c4vrLrq7/

基本上是方形（#blue），三角形（#triangle），平行四边形（#parallelogram）

    #container {
        width: 100%;
        height: 100px;
        background-color: white;
        position: absolute;
    }
    
    #blue {
        width: 200px;
        height: 100px;
        background-color: blue;
        float: left;
    } 
    
    #triangle {
    	width: 0;
    	height: 0;
    	border-left: 50px solid transparent;
    	border-right: 50px solid transparent;
    	border-bottom: 100px solid blue;
        float: left;
        margin-left: -50px;
        
    }
    #parallelogram {
    	width: 50px;
    	height: 100px;
    	-webkit-transform: skew(30deg);
    	   -moz-transform: skew(30deg);
    	     -o-transform: skew(30deg);
    	background: purple;
        float: left;
        margin-left: -50px;
    }

    <div id="container">
        <div id="blue"></div>
        <div id="triangle"></div>
        <div id="parallelogram"></div>
    </div>

Answer 4

如果您想要background-image，则可以使用rgba()值和a：伪元素。

我们的想法是将background-image应用于:after：伪元素，将linear-gradient应用于主rgba()上的div。

您可以通过更改linear-gradient

中的Alpha值来更改rgba(red, green, blue, alpha)的不透明度

＆＃13;

div {
  position: relative;
  height: 200px;
  background: linear-gradient(55deg, rgba(122, 0, 201, 0.8) 75%, rgba(178, 0, 204, 0.8) 75%, rgba(178, 0, 204, 0.7) 80%, transparent 80%);
}
div:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/700/200);
  z-index: -1;
}

＆＃13;

<div></div>

＆＃13;

创建一个有角度的颜色横幅

4 个答案: