CSS designs that adapt with the screen: Triangles in

I'm currently working on creating a responsive triangle using CSS. I want both the height and width of the triangle to adjust as the window size changes.

Below is my static code:

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  position:absolute;
  right:0px;
  bottom:0px;
  border-style: solid;
  border-width: 0 0 600px 1100px;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #01fe77 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
htmlcss

Answer №1

Here is the code snippet for creating a triangle shape:

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  position:absolute;
  right:0px;
  bottom:0px;
  border-style: solid;
  border-width: 0 0 60vw 60vw;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
}

I hope this solution helps!

Answer №2

Experiment with the viewport width using the vw unit

#triangle {
  z-index: 2;
  width: 0;
  height: 0;
  _border-color: #000000 #000000 #01fe77 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  display: block;
  border-style: solid;
  border-width: 0 0 50vw 100vw;
  border-color: transparent transparent #01fe77 transparent;
  line-height: 0px;
}

Give it a try

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

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

javascripthtmlcssforms

Struggling with modifying class in HTML using JavaScript

I've been attempting to replicate a JavaScript code I came across on the internet in order to create a functioning dropdown menu. The concept is quite straightforward - the div class starts as xxx-closed and upon clicking, with the help of JavaScript, ...

javascriptjqueryhtml

Calculate the percentage of a specific side for the border-radius using a single radius

I am looking to adjust the border-radius of a div based on its dimensions without creating an elliptical or pill shape effect. For instance, if a div has a width and height of 250px and 35px respectively, the border-radius should be set to 7px. Similarly, ...

cssrounded-corners

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

htmlcss

iOS7 webkit introduces a new feature called span word break

After upgrading my phone to iOS7 today, I came across a strange issue. (blog.niwyclin.org) This is just a test post on my website Everything looks good on the desktop browser. When I used Responsivator to check, it appeared perfect, like this (i.minus.c ...

htmlioscsswebkitios7

Does HTML elements come with a pre-set background color of white or transparency by default?

Feeling a bit confused about a straightforward issue. Can someone clarify for me - What is the original background color of HTML elements? Is it white by default or transparent? ...

htmlcss

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

What could be causing my dropdown menu to vanish unexpectedly after being clicked for the first time?

To view the live demonstration, simply click here. I have an issue with my drop down menu where it is hidden upon first click. Additionally, I would like the drop down menu to disappear when clicked anywhere outside of its current display. How can I accomp ...

jquerycssdrop-down-menuslidetoggle

Having trouble with adding Jquery UI CSS to my project even after bundling

I have implemented jQuery UI in my small project, but the CSS styles are not being applied. The following bundle includes the necessary CSS files: bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jque ...

c#cssjquery-uiasp.net-mvc-5

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...

javascriptcssreactjsnext.js

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

Unfortunately, Safari and iOS do not support the video functionality

I am encountering an issue with my HTML5 sample video not loading in Safari 11 on OSX, but working perfectly fine in Chrome and Firefox. Additionally, the video is not functioning on iOS at all (neither in Safari nor in Chrome). Below is the HTML code: & ...

djangohtmlvideosafarihttp-headers

Opting for PHP over JSON in a jQuery live search code

Is it possible to modify my jQuery Google Instant style search script to pull content from a PHP script instead of using the BingAPI? Below is the current code being used: $(document).ready(function(){ $("#search").keyup(function(){ var searc ...

phpjavascriptjqueryhtmljson

Pricing determined by location on a website created with HTML

We are looking to customize our HTML5/CSS3 website by displaying different pricing tables based on the location of each visitor. Our goal is to have a fixed price for users from Singapore while showing a different price for visitors from other parts of th ...

javascripthtmlgeolocation

Does Internet Explorer have a tool similar to Firebug for debugging websites?

Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...

htmlcssinternet-explorer

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

htmlcss

Receiving a NaN output rather than a numerical value

Experiencing what seems to be a straightforward syntax error, but I'm unable to pinpoint it. Controller: $scope.startCounter = 3; $scope.startTimeouter = function (number) { $scope.startCounter = number - 1; mytimeouter = $t ...

javascripthtmlangularjsionic-framework

Frames of Animation

Seeking assistance in understanding how to create frame animation using JavaScript or CSS. Attempting to replicate the animation seen on this website. Intrigued by the road animation and unsure if it is achieved using a plugin or just JavaScript and CSS. ...

javascripthtmlcsssvgcss-animations

The toggle feature in jQuery doesn't hide content in the same manner as it was originally shown

Just diving into the world of jquery and I'm experimenting with the toggle function to display and hide a div, along with adding or removing an active class. http://jsfiddle.net/MAkyw/ I've encountered 2 issues: 1) The 'active' class ...

jqueryhtmlcss

The inclusion of the <div> tag disrupts the functionality of the Material UI Grid

While attempting to enclose my element within a <div> that is nested inside the <Grid>, I realized that this was causing the <Grid> layout to break! Surprisingly, when I tried the same approach with Bootstrap grid system, this issue did n ...

cssreactjsmaterial-ui