We Keep Coding

Linear Gradient with border top

I am creating a tarpezoid shape using CSS. I want the color of trapezoid to slowly fade away. I created the trapezoid using the following CSS:
$(".trapezoid-wrapper").css("border-top",'200px solid rgba('+finalRgb[0]+','+finalRgb[1]+','+finalRgb[2]+','+ 0.05 + ')');
$(".trapezoid-wrapper").css("border-left", left + 'px solid transparent');
$(".trapezoid-wrapper").css("border-right", left + 'px solid transparent');
Some static CSS on trapezoid wrapper:
.trapezoid-wrapper {
height: 495px;
width: 535px;
bottom:-7px;
position: absolute;
}
What I have got so far is: https://ibb.co/f83Pi7
I want the trapezoid color to slowly fade away as we move up. Can anyone please help on this? I tried with linear-gradient but its not working well.

Border width based on screen size

I am creating diagonal top and bottom pieces to sections on a website.
I was wondering if there is a simple jquery solution to style the border width based on the screen size? I can't use a set long size with overflow: hidden because the diagonal line isn't the correct angles.
The only way I can see to make the angles consistent is to have jquery set the border width based on the screen size.
.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}
.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}
.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}
Jquery would then generate a style that would read
.odd-section-top {
border-left-width:
}
.odd-section-bottom {
border-right-width:
}
And populate the numbers based on the screen size.
Thank you!

You could do everything within Javascript:
var borderWidth = $elem.css("border-left-width");
$(".odd-section-top").css("border-width", borderWidth);
You can adapt it to your desired logic.

Tried this but I know I messed up some of the syntax. I'm still newer to javascript and jquery. Is this on the right track?
<script>
$(document).ready(function () {
responsiveradio.initBorders = function () {
var $window = $(window),
$topOddBox = $('.odd-section-top'),
$botOddBox = $('.odd-section-bottom'),
$topEvenBox = $('.even-section-top'),
$botEvenBox = $('.even-section-bottom'),
;
function resetBorders() {
var w = $window.width(),
$topOddBox.css('border-left-width', w);
$botOddBox.css('border-right-width', w);
$topEvenBox.css('border-left-width', w);
$botEvenBox.css('border-right-width', w);
}
});
</script>

Canvas loses style when I create Fabric.js canvas

I have a Canvas Object with top and left attributes defined through with JavaScript function but when I create a fabric Canvas object
var fabricCanvas= new fabric.Canvas('mycanvas');
my canvas is not appearing as it should i have tried doing this
reading stack over flow say margin : 0 auto solves the problem but it does not
.canvas-container {
margin:0 auto ;
position:absolute;
top: 110;
left: 310;
}
http://postimg.org/image/htvvfr5ct/
it just stay at the bottom and not comming to the middle position

By default a relative positioning style gets applied to the class canvas-container try adding important, see CSS code below:
.canvas-container {
position:absolute !important;
top: 110;
left: 310;
}
I have removed the margin:0 auto as the element is positioned absolute. If you want to center an element using positioning use the below css:
.canvas-container {
width:800px; /*assuming a width of 800px*/
height:600px; /* assuming a height of 600px */
position:absolute !important;
top: 50%;
left:50%;
margin-left:-400px; /* width/2 */
margin-top:-300px; /* height/2 */
}
this would center the element as per the body, else you may add a position:relative to the parent of the element.

make a triangle div to hold text and close on hover out

How do I make a fixed triangle div hold text and images?
Also what I did was this but here when the div is open on hover, and when I hover out, it doesn't close as the div is in a square shape, So what I need to do so the moment user hovers out, the div should be closed?
jQuery will be fine too
CSS
.map {
background-color: transparent;
position: absolute;
border-top: 0px;
border-right: 500px solid transparent;
border-left: 0;
border-bottom: 500px solid #ff0000;
width: 0;
position: fixed;
bottom: -440px;
}
.map:hover {
bottom: 0px;
}
Another fiddle

If you inspect the element in chrome for example, youu ll see that altho you use borders to create this trick div remains a square and when you hover over it covers the bottom left 500x500 pixels
You might want to consider tracking the mouse coords in order to achieve what you want.
$(".map").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});

Can't get accurate dimensions of my canvas

I don't know why but my JS won't return the correct values of my canvas' dimensions.
I have this to get the values:
temp = document.getElementById('myCanvas');
canvas = new Array();
canvas['width'] = temp.width;
canvas['height'] = temp.height;
My CSS & HTML is:
//html
<canvas id="myCanvas" class="c"></canvas>
//related css
.c{
width:100%;
margin:0 auto;
height:500px;
background-color:green;
position:absolute;
left: 0;
top: 0;
border:1px solid red;
}
The result of the array shows:
width: 300, height: 150
This cannot be correct if the CSS sets it as 500px and it shows on the screen as 500px. Why might this be ?

This is the correct size!
By setting canvas dimensions in CSS, you haven't changed the pixel-by-pixel size of the canvas. It's still the default 300x150, you just stretched the pixels. You can verify this if you draw a circle on the stretched canvas: you will get an ellipse. It's better to change the width and height attributes of the canvas tag directly, and not in CSS.
Source, Example