I am working on a rectangular background which is divided into 2 triangles by a line from top left to bottom right, as shown in the pic.
What I want to achieve is color transition in each triangle:
Note: The width and height are not fixed to 600 and 250. I just use them for demo purpose.
HTML code:
<div class="background-wrapper">
<p class="float-left">A</p>
<p class="float-right">B</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="float-left">C</p>
<p class="float-right">D</p>
</div>
CSS code:
.background-wrapper {
position: relative;
width: 600px;
height: 250px;
color: #FFFFFF;
padding: 20px 50px 80px 50px;
background: linear-gradient(to left bottom, pink 50%, blue 50%);
}
.float-left {
float: left;
}
.float-right {
float: right;
}
One posibility, that is cross-browser but that gives washed colors, is to overlay the triangles with a semitransparent gradient that is white on one side and black in the other.
This effect gets much better using blend modes, but the support is lower.
.test { width: 400px; height: 300px; background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.5)), linear-gradient(to top right, blue 50%, fuchsia 50%); }
<div class="test"></div>
You can use more colors after you define the linear-gradient position, so you can do stuff like:
background: linear-gradient(to left bottom, deeppink 0%, pink 50%, blue 50%,midnightblue 100%);
Check your updated fiddle
I modified your code quite a bit from the original. I added two new elements to act as the background. May not be the solution you're looking for but off the top of my head this is what works.
.background-wrapper { position: relative; width: 600px; height: 250px; color: #FFFFFF; padding: 20px 50px 80px 50px; overflow: hidden; } .triangle { position: absolute; top: -65%; right: -30%; width: 125%; height: 125%; transform: rotate(26.5deg); background: linear-gradient(to right, pink, #f44274); } .triangle.bottom { top: initial; right: initial; left: -30%; bottom: -64.8%; background: linear-gradient(to right, blue, navy); }
<div class="background-wrapper"> <div class="triangle top"></div> <div class="triangle bottom"></div> </div>
.background-wrapper {
position: relative;
width: 800px;
height: 450px;
background: #ffffff;
/* Old Browsers */background: -moz-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, #ffffff), color-stop(49%, #6176ff), color-stop(50%, #ff80d9), color-stop(100%, #ffffff));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* IE 10+ */background: linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.float-left {
float: left;
}
.float-right {
float: right;
}
you can specify the angle in the gradient. Try the above code. it works with width and height.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.