triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it.

For the triangle-bottom-right, I'd like the gradient to go from rgba(70, 70, 70, 0.15) on the left to rgba(70, 70, 70, 0) on the right. This should be viewable in Chrome (through Electron).

The triangles should be able to resize based on the browser width while maintaining a constant height.

This is the CSS code I'm using:

.triangle-footer {
    position: relative;
    bottom: 0px;
    height: 176px;
    width: 100%;
}
.triangle-bottom-left {
    position: absolute;
    width: 40%;
    height: 100%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
    position: absolute;;
    width: 125%;
    height: 140%;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, rgba(70, 70, 70, 0.15) 50%, rgba(255, 255, 255, 0) 50%);
}

This is how I've structured my HTML:

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right"></div>
</div>

(I'm utilizing Semantic-UI for the sticky footer)

Check out the live example here: http://jsfiddle.net/fu2dhfdv/1/

htmlcsscss-shapeslinear-gradients

Answer №1

It appears that achieving a right triangle effect using only a linear-gradient background image may not be possible. The transparency of the right triangle causes it to appear as such, and applying additional gradients results in filling the entire square area. To work around this limitation, options include making the top half white and layering another gradient or utilizing a mask or clip-path to conceal the top half.

Employing SVG Mask:

In light of limited browser support for CSS mask and clip-path, inline SVG can serve as a viable option for creating a mask, as showcased below.

Utilizing SVG Polygon: (or with path element)

An alternative approach involves using a single SVG polygon element instead of a mask, offering flexibility in implementation. The choice between the two methods is left to preference :)

Implementing CSS Masks: (ideal for Chrome compatibility)

If targeting specifically the Chrome browser, consider employing the -webkit-mask-image property along with a linear-gradient style, outlined in the code snippet below. This method, although supported in Chrome, may not be recommended for broader browser compatibility.

Using CSS Clip Path: (suitable for Chrome compatibility)

For a triangular shape effect, CSS clip-path can be utilized alongside a left-to-right gradient, tailored for Chrome compatibility. The right-bottom element is clipped to replicate the desired triangle shape, while incorporating the gradient effect.

Answer №2

Just a little FYI, this design could be used as a possible backup option with a simple white background.

Combining 3 gradients and adjusting the background-size might just do the trick.

html {
  min-height:100%;
  background:
    linear-gradient(to  left, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%) bottom no-repeat,
    linear-gradient(to top left, rgba(0,0,0,0.1) 50%, transparent 50%)bottom right no-repeat,
    linear-gradient( to top right, #5EC252 50%, transparent 50%)bottom left no-repeat white;  
  background-size:100% 245px, 127% 245px ,  40%  170px;
}

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

space allocated beneath a table cell

I am currently utilizing the foundation framework for emails and have encountered a formatting issue on my Test Page. There seems to be an unwanted whitespace just below the racoon image that I am struggling to remove. Despite setting the height to 250px, ...

htmlcss

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

jqueryhtmlcsshtml-tablebootstrap-4

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

htmlcssbootstrap-5

JavaScript code that triggers a function when the mouse is moved over a description box on a

As a beginner in the field of Computer Science, I recently embarked on a project to create a website for sharing science articles with students. The goal is to spark curiosity and interest in science through this platform. One key feature I wanted to inclu ...

javascripthtmlwebonmouseoveronmouseout

Is there a way to position the drop-down menu in front of the slider?

Hey there, I'm currently experiencing some issues with the drop-down menu on my index page. The drop-down items are hidden below my image slider, which is directly underneath my navigation bar. I would really appreciate any help in fixing this so that ...

htmlcssslidernavbar

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

The response contains a JSON object with the values [object, Object]

I am attempting to showcase JSON data in an HTML table. Here is the code I have been using: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ ...

phphtmljson

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

phphtmlform-control

Is it possible to implement a hover animation within another hover animation in WordPress?

Trying to incorporate two hover animations for the images in my photo galleries. When hovering over an image, I want a text to appear in a black overlay, and then when hovering over that text, it should become underlined. Looking for something similar to ...

htmlcsswordpressclasshover

Guide to setting up collapsible sections within a parent collapsible

I came across this animated collapsible code that I'm using: https://www.w3schools.com/howto/howto_js_collapsible.asp Here is the HTML: <button type="button" class="collapsible">Open Collapsible</button> <div class="content"> &l ...

javascripthtmlcss

Adjust the width of the scrollbar for the <aside> section

<aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-left ms-3" id="sidenav-main"></aside> Within this aside element, I have implemented a scrollbar. However, I am seeking to adjust ...

htmlcsslaravelbootstrap-4

Execute PHP script through jQuery request within the context of a Wordpress environment

I want to replicate a specific functionality in WordPress. In this functionality, jQuery calls a PHP file that queries a MySQL table and returns the result encapsulated within an HTML tag. How can I achieve this? <html> <head> <script ...

javascriptphpjqueryhtmlwordpress

Accessing an Android device from localhost using a hostname with ever-changing IP addresses

SCENARIO: I am currently running a local webpage on a WAMP server from my computer, which is connected to a wireless network. Additionally, I have an Android tablet also connected to the same network. OBJECTIVE: My goal is to access the local webpage on ...

networkingmobiletcpiphtml

Can you provide instructions on how to use jQuery to target divs similarly to selecting areas in Photoshop?

Is it possible to use jQuery to select a group of div elements on specific positions, similar to how you would select objects in Photoshop using the mouse? ...

jqueryhtmlselectarea

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

phphtmlmysql

Troubleshooting: Ruby on Rails and Bootstrap dropdown issue

Having some issues with implementing the bootstrap dropdown functionality in my Ruby on Rails application's navigation bar. I have made sure to include all necessary JavaScript files. Below is the code snippet: <div class="dropdown-toggle" d ...

javascriptcssruby-on-railsrubytwitter-bootstrap

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Incorporating an external HTML page's <title> tag into a different HTML page using jQuery

I am faced with a challenge involving two files: index.html and index2.html. Both of these files reside in the same directory on a local machine, without access to PHP or other server-side languages. My goal is to extract the <title>Page Title</ ...

javascriptjqueryhtmlfrontend