- This topic is empty.
-
AuthorPosts
-
August 28, 2011 at 6:10 am #85856January 13, 2012 at 11:53 am #94534erikportinMember
I have the same problem and haven’t really come up with any good solution. The best I could do without javascript was this http://jsfiddle.net/AWGHu/ and it really doesn’t look good and it’s not very flexible. It kind of looks good on a retina display in some sizes.
I think I’ll go for an image instead…
November 12, 2012 at 6:58 am #114008Historical Forums UserParticipantStumbled upon this when I googled the same issue:)
A technique i’m just playing with is using SVG as background image.:
background-image: url(‘img/bg.svg’);
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;November 12, 2012 at 9:13 am #114016JoniGiuroParticipantHere’s my attempt:
http://zhereicome.com/experiments/statics/line/It only works for chrome for now, because I was too lazy to add all the prefixes in the js and css.
the script:
scrW = $(window).width();
scrH = $(window).height();
angle = (Math.atan(scrH / scrW)) * (180/3.14);
var line = $(‘#line’);
var length = Math.sqrt(( scrW * scrW) + (scrH * scrH ));
line.css(‘left’, ( -1 ) * ((length – scrW) / 2) );
line.css(‘width’, length);
line.css(‘top’, scrH / 2);
line.css(“-webkit-transform”, “scale(1) rotate(” + (-1) * angle + “deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)”);December 6, 2012 at 1:34 pm #116540Rob WierzbowskiParticipantIf you’re ok with a css3 requirement, you can create an oversized image with a diagonal line from one corner to the other, and then apply as a fixed background on an element with [background size](https://developer.mozilla.org/en-US/docs/CSS/background-size): 100% 100%. One quibble is the line thickness will change depending on the pixel size of the viewport, but during a single session that won’t be noticeable.
March 28, 2013 at 7:33 pm #130091gabyMemberYou can use a diagonal (`to bottom right`) gradient that is very thin..
see http://jsfiddle.net/gaby/pD6Wd/
body{
background:linear-gradient(to bottom right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,1) 50.1%,
rgba(0,0,0,0) 50.2%,
rgba(0,0,0,0) 100%
);
}March 6, 2017 at 9:27 am #252449allicarnParticipantExpanding on gaby’s post, you can use calc to get the precise pixel width that you want that line to be:
In SCSS:
$line-color: red; $line-width: 1px; background-image: linear-gradient(to bottom left, transparent 50%, $line-color 50%, $line-color calc(50% + $line-width), transparent calc(50% + $line-width));
See a working codepen example here.
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.