Develop a stylish HTML/CSS box featuring a trio of diagonal gradient colors

Trying to achieve a square with three colors inspired by the concept of a Two-tone background split by diagonal line using css, but with an additional color scheme similar to this example:

https://i.sstatic.net/ci2Zv.png

Seeking advice. Attempted the following CSS:

.diagonal-box {
  width: 200px;
  height: 200px;
  position: relative;
}

.diagonal-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 200px 200px;
  border-color: transparent transparent #FF7F50;
}

.diagonal-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 200px 200px 0;
  border-color: transparent #00BFFF transparent;
}

.diagonal-box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 200px 0 0;
  border-color: #7CFC00 transparent transparent transparent;
}
<div class="diagonal-box">
  <div></div>
</div>

However, the triangles are not aligned as desired.

htmlcss

Answer №1

Here is a straightforward solution that does not require any additional div elements or the use of before and after pseudo-elements:

.diagonal-box {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #ff7f50 0% 35%, #7cfc00 35% 65%, #00bbff 65% 100%);
}

Answer №2

Is this the solution that resolves your issue? I opted to utilize the clip-path property to create basic triangles rather than relying on transparent borders. You have the freedom to adjust the width of the shorter sides of the triangles by modifying the value of --width.

<html>

<head>
  <title>Box with Three Diagonal Colors</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .diagonal-box {
      width: 200px;
      height: 200px;
      position: relative;
      background-color: blue;
    }

    .diagonal-box::before,
    .diagonal-box::after {
      position: absolute;
      inset: 0;
      /* this equals top, right, bottom, left: 0 */
      content: "";
    }

    .diagonal-box::before {
      --width: 160px;
      clip-path: polygon(0 0, var(--width) 0, 0 var(--width));
      background-color: yellow;
    }

    .diagonal-box::after {
      --width: 160px;
      clip-path: polygon(100% 100%, 100% calc(100% - var(--width)), calc(100% - var(--width)) 100%);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="diagonal-box"></div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

"Explore the dropdown options on the Twitter Bootstrap menu by hovering your cursor

Is there a way to modify the code so that when hovering over a dropdown menu created with Twitter Bootstrap 3, the menu expands and users are able to click on the expanded links? The HTML code I came up with is as follows: <nav> ...

htmlcsstwitter-bootstrap

Adjusting the width of columns in a table

Previously in Bootstrap 3, I was able to use col-sm-xx on the th tags within the thead to resize table columns as needed. However, this functionality is no longer available in Bootstrap 4. How can I achieve a similar effect in Bootstrap 4? <thead> & ...

csstwitter-bootstraphtml-tablebootstrap-4

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap

Django: Is there a way to modify the PayPal script for pay upon arrival?

I currently do not wish to accept online payments on my e-commerce site. Instead, I would like the courier to handle package delivery and collection of fees. How can I modify the PayPal script to bypass validations and only register payments upon arrival? ...

javascriptpythonhtmldjango

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

My button includes a text field that is constantly disabled. I would like for the text field to appear as bright as it does when the button is enabled. After disabling the button, they both appear dimmer compared to others and the text field follows suit ...

javascriptjqueryhtmldom

Using ng-class directive with condition in AngularJS

Here is a unique pop-up that allows users to encode item information. https://i.sstatic.net/sn9QZ.png I need to implement a feature where, if both the Foreign Currency and Conversion Rate fields have values, the Amount should be calculated by multiplying ...

htmlangularjsasp.net-mvc

CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page direct ...

htmlcssprintingsafarimedia-queries

Pedestrian crossing Cordova experiences delayed response despite ontouchstart attempts to fix it

I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase. Here is my CSS code: .btn {...} .btn:active{...} To ...

androidjquerycsscordovacrosswalk-runtime

Lock GridView headers when only scrolling vertically

I am facing an issue with my gridview on an aspx page. The gridview is wider than the page itself, so I want the headers of the gridview to scroll horizontally along with the content, while remaining fixed vertically. Can anyone help me achieve this? I hav ...

c#asp.netcssgridviewscroll

Steps for incorporating universal style into Angular 6/7 library

I attempted to incorporate global styles in my Angular app similar to how it's done, but unfortunately, it didn't work as expected. The library I'm using is named example-lib. To include the styles, I added styles.css in the directory /proj ...

cssangularstylesangular-library

An error occurred while using Phonegap's FileTransfer() method - it seems that the File

After exploring various resources and finding no solutions, I have turned to this platform for help. I am attempting to initiate a .pdf download upon clicking on the following link: <a onclick="BeginDownload()" class="link" href="#">My guides</a ...

htmlcordovaphonegap-pluginsphonegap-build

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

javascriptjquerycssjquery-uidatepicker

The progress bar in Java Script is static and cannot be customized to change colors

Trying to use HTML for image uploads and I've created Java code to monitor the progress of the upload. However, I'm facing an issue where I cannot change the color of the progress loading bar. Below is the code I am currently using for uploading ...

javascriptphphtml

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

Recently, I've been facing a peculiar issue while developing a web application. The purpose of this app is to capture about 10 seconds of video intermittently from the device webcam and then upload it to a server. For this functionality, I utilized th ...

javascripthtmlfirefoxwebrtcgetusermedia

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

Is it possible to make one <td> tag bold in a table if the <tr> contains two <td> tags?

I need to make the first td tag bold and apply this style to the entire table. <table> <tr> <td><strong>Cell A</strong></td> <td>Cell B</td> </tr> </table> ...

htmlcsshtml-table

What is the method for inserting a vertical line between two div elements?

Can you show me how to add a vertical line between two div elements? .flex-container { display: -webkit-flex; margin: 0 auto; text-align: center; } .flex-container .column { width: 320px; text-align: center; } .vr { border-left: 2px dott ...

htmlcss

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

cssxhtmltagshighlightingdouble-click