创建一个有角度的彩色横幅 [英] Create an Angled Color Banner

问题描述

你好，我正在尝试在HTML& CSS：

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

我明显可以看到如何使用图像做到这一点，关于HTML / CSS只有？

这可能吗？

它在网站上使用 - www.africa。约会

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

小提琴： http://jsfiddle.net/e2dr5udr/3/

 < div id =container> 
< div id =blue>< / div> 
< div id =purple>< / div> 
< / div> 
 
 #container {
 width：100％; 
 height：100px; 
背景颜色：白色; 
位置：绝对; 
} 
 
 #blue {
 width：100％; 
 height：100px; 
 background-color：blue; 
位置：绝对; 
} 
 
 #purple {
 width：100％; 
 height：100px; 
背景色：紫色; 
位置：绝对; 
} 
  

thankyou

解决方案

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

这将允许你创建它只有一个元素，以创建此：

.title {height：1px; background-color：transparent; border-bottom：170px纯蓝色; border-right：170px solid transparent;宽度：190px;位置：相对; } .title：after {content：;位置：绝对的; height：1px;顶：0像素; background-color：transparent; border-bottom：170px纯色紫色; border-right：170px solid transparent; width：210px;的z-index：-1; }

< div class =title><<< ; / div>

如果你不想使用这种方法，另一种方法（使用背景渐变）可以在此处查看

< hr>

使用SkewX ：

  div {position：relative;高度：15vh;宽度：60vw;溢出：隐藏; } div：在{z-index：-1;内容：;位置：绝对的;顶部：0;高度：100％;右：50％;宽度：150％; border-right：10px纯绿色;背景：矢菊花; -webkit变换：如果skewX（45deg）;变换：如果skewX（45deg）; }  

< div> 123< / div>

Hi I'm trying to create the following Angled Strip Look in HTML & CSS:

Just the Blue and Purple area with white after.

I can obviously see how to do it using an image but what about HTML/CSS only?

Is this possible?

Its used on the site - www.africa.dating

I know I should have more example code but I'm actually not sure where to begin so I only have the following HTML:

Fiddle: 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

解决方案

You can use a pseudo element and some border manipulation.

This would allow you to create it with only a single element, to create this:

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

If you do not want to use this approach, an alternative method (using background gradients) can be viewed here

---

Using 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>

这篇关于创建一个有角度的彩色横幅的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！