Three Colors Angled Background Color

Three colors angled background color

The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image.

The snippet uses a couple of pseudo-elements with different background colors skewed at required angles to produce the three-color effect.

.bg {  position: relative;  height: 200px;  width: 400px;  padding: 4px;  background: orange;  overflow: hidden;}.bg:after,.bg:before {  position: absolute;  content: '';  left: 0px;  height: 100%;  width: 100%;  transform-origin: right top;}.bg:before {  top: 0px;  background: red;  transform: skewY(-45deg);}.bg:after {  top: -100%;  background: yellow;  transform: skewY(-15deg);}span {  position: relative;  z-index: 2;}
/* Just for demo */.bg:hover {  height: 200px;  width: 500px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class="bg">  <span>Some content inside</span></div>

How to create a Slanted Background with CSS?

You can use pseudo element with skew transformation :

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

How to create a gradient with 3 colors in CSS without color escalation

Sure, just add color stops at every (100/numColors)%

div {  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);  width: 100%;  height:64px;}

<div></div>

Body background with 3 background colors

Linear Gradient Approach

You can make use of linear-gradient background images like in the below snippet. Making the color stop point of one color as the starting point of the next color would produce a block like effect instead of an actual gradient like effect.

Linear gradients are supported in the recent versions of all browsers. If you want to support IE9 and lower then you may have to look at some libraries (like CSS3 PIE) or use a different approach like box-shadow (inset) or some extra (or pseudo) elements.

Horizontal Stripes:

To create horizontal stripes, an angle (or sides) need not be specified because the default angle is 0 degree (or to bottom like mentioned in jedrzejchalubek's answer).

body {  height: 100vh;  width: 100vw;  background-image: linear-gradient(red 33.33%, white 33.33%, white 66.66%, blue 66.66%);  background-size: 100% 100%;  background-repeat: no-repeat;  margin: 0px;}

<!-- to avoid browser prefixes --><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

Fill background-color with 2 colors height-wise

I'm not sure what you found, but you can use linear-gradient for this:

body {
height: 100vh;
background: linear-gradient(0deg, rgba(204,0,0,1) 50%, rgba(0,212,255,1) 50%); 
}

<body>
</body>

Css angle background-color multiple

You may use flex and gradient background: http://codepen.io/gc-nomade/pen/XNgamB

* {  margin:0;  padding:0;}ul {  display:inline-flex;  flex-flow:column;  vertical-align:top;  width:13em;  height:17em;  background:#153454;  box-shadow:inset  0 0 2px  ;  border:8px solid #224262;  background:linear-gradient(97deg, transparent 3em , #153454 1em ),    linear-gradient(to top, #00B169 20%, #00A6C4 20% , #00A6C4 40%, #FFDE00 40%, #FFDE00 60%, #FF9900 60%, #FF9900 80%, #E40000 80%)}li  {  flex:1;  text-align:center;  display:flex;  align-items:center;  justify-content:center;  font-variant:small-caps;  color:#ddd;  font-size:1.5em;}.act, li:hover  {  box-shadow:inset 0 0 0 2px #FF9600}

<ul>  <li>item</li>  <li>item</li>  <li class="act">item</li>  <li>item</li>  <li>item</li></ul>

Angled gradient background in Jetpack Compose

Edit 2022-04-06

I realised there is an error in the original code, which distorts the gradient angle. Some more trigonometry is needed in order to constrain the gradient start and ends to within the canvas area (if that is what is desired) while also preserving the gradient angle. Here is the updated solution, with bonus ASCII art.

    fun Modifier.angledGradientBackground(colors: List<Color>, degrees: Float) = this.then(
    drawBehind {
        /*
        Have to compute length of gradient vector so that it lies within
        the visible rectangle.
        --------------------------------------------
        | length of gradient ^  /                  |
        |             --->  /  /                   |
        |                  /  / <- rotation angle  |
        |                 /  o --------------------|  y
        |                /  /                      |
        |               /  /                       |
        |              v  /                        |
        --------------------------------------------
                             x

                   diagonal angle = atan2(y, x)
                 (it's hard to draw the diagonal)

        Simply rotating the diagonal around the centre of the rectangle
        will lead to points outside the rectangle area. Further, just
        truncating the coordinate to be at the nearest edge of the
        rectangle to the rotated point will distort the angle.
        Let α be the desired gradient angle (in radians) and γ be the
        angle of the diagonal of the rectangle.
        The correct for the length of the gradient is given by:
        x/|cos(α)|  if -γ <= α <= γ,   or   π - γ <= α <= π + γ
        y/|sin(α)|  if  γ <= α <= π - γ, or π + γ <= α <= 2π - γ
        where γ ∈ (0, π/2) is the angle that the diagonal makes with
        the base of the rectangle.

        */

        val (x, y) = size
        val gamma = atan2(y, x)

        if (gamma == 0f || gamma == (PI / 2).toFloat()) {
            // degenerate rectangle
            return@drawBehind
        }

        val degreesNormalised = (degrees % 360).let { if (it < 0) it + 360 else it }

        val alpha = (degreesNormalised * PI / 180).toFloat()

        val gradientLength = when (alpha) {
            // ray from centre cuts the right edge of the rectangle
            in 0f..gamma, in (2*PI - gamma)..2*PI -> { x / cos(alpha) }
            // ray from centre cuts the top edge of the rectangle
            in gamma..(PI - gamma).toFloat() -> { y / sin(alpha) }
            // ray from centre cuts the left edge of the rectangle
            in (PI - gamma)..(PI + gamma) -> { x / -cos(alpha) }
            // ray from centre cuts the bottom edge of the rectangle
            in (PI + gamma)..(2*PI - gamma) -> { y / -sin(alpha) }
            // default case (which shouldn't really happen)
            else -> hypot(x, y)
        }

        val centerOffsetX = cos(alpha) * gradientLength / 2
        val centerOffsetY = sin(alpha) * gradientLength / 2

        drawRect(
            brush = Brush.linearGradient(
                colors = colors,
                // negative here so that 0 degrees is left -> right
                and 90 degrees is top -> bottom
                start = Offset(center.x - centerOffsetX,center.y - centerOffsetY),
                end = Offset(center.x + centerOffsetX, center.y + centerOffsetY)
            ),
            size = size
        )
    }
)

Old answer

This was my final solution based on @Ehan msz's code. I tweaked his solution so that 0 degrees corresponds to a left-to-right gradient direction, and 90 degrees corresponds to a top-to-bottom direction.

fun Modifier.angledGradient(colors: List<Color>, degrees: Float) = this.then(
Modifier.drawBehind {
    val rad = (degrees * PI / 180).toFloat()
    val diagonal = sqrt(size.width * size.width + size.height * size.height)
    val centerOffsetX = cos(rad) * diagonal / 2
    val centerOffsetY = sin(rad) * diagonal / 2

    // negative so that 0 degrees is left -> right and 90 degrees is top -> bottom
    val startOffset = Offset(
        x = (center.x - centerOffsetX).coerceIn(0f, size.width),
        y = (center.y - centerOffsetY).coerceIn(0f, size.height)
    )
    val endOffset = Offset(
        x = (center.x + centerOffsetX).coerceIn(0f, size.width),
        y = (center.y + centerOffsetY).coerceIn(0f, size.height)
    )

    drawRect(
        brush = Brush.linearGradient(
            colors = colors,
            start = startOffset,
            end = endOffset
        ),
        size = size
    )
}

Apply two color on button background

This is achievable with linear-gradient.

The linear-gradient stands for four-parameter:

<angel>. Which is the starting point of linear-gradient, so a value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
color. It will indicate the color of linear-gradient, which can be either rgb, rgba, or hex.
<linear-color-stop>. This indicates the stopping point of colors on our linear-gradient (To keep it dynamic for various width you should use it with percentage rather than raw numbers.)
<color-hint>. This one indicates an interpolation hint defining how the gradient progresses between adjacent color stops. So whenever you set it to 100% it will come up with a hard line where the gradient changes (It should always set for the last color or by indicating color individually).

linear-gradient(<angel>, color <linear-color-stop> <color-hint>)

Your final code should be something like this:

button {  width: 200px;  height: 50px;  border: 1px solid rgba(40, 141, 211, 1);  border-radius: 5px;  background: linear-gradient(315deg, rgba(40, 141, 211, 1) 90%, rgba(255, 214, 103, 1) 10% 100%);}

<button></button>

Two-tone background split by diagonal line using css

Here are the examples in action: http://jsbin.com/iqemot/1/edit

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.

#container {  height: 100px;  width: 100px;  overflow: hidden;  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);}
#triangle-topleft {  width: 0;  height: 0;  border-top: 100px solid gray;  border-right: 100px solid transparent;}

<div id="container">  <div id="triangle-topleft"></div></div>

Three Colors Angled Background Color