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>