Responsive diagonal lines css

Question

I need help with setting a diagonal line in css to fit into many resolutions via mobile. Theres a div with 100% width and a diagonal line that supposed to stay in its place inside that div but every time I change the resolution of the window the line moves up or down. There must be something I can do.

Heres an example:

.wrapper
{
width: 100%;
position: relative;
border: 1px solid red;
overflow: hidden;
padding-bottom: 12px;
}
.upper-triangle
{
-moz-transform: rotate(-3.5deg);
-o-transform: rotate(-3.5deg);
-webkit-transform: rotate(-3.5deg);
-ms-transform: rotate(-3.5deg);
transform: rotate(-3.5deg);
border-color: black;
border-style: solid;
border-width:2px;
position: relative;
top: -21px;
zoom: 1;
width: calc(100% - -2px);
right: 1px;
}
.arrow-wrapper
{
position: absolute;
top: 41px;
left: 22px;
z-index: 1;
}
.arrow-wrapper::before
{
border-style: solid;
border-width: 16px 0px 0px 20px;
border-color: transparent transparent transparent black;
position: absolute;
content: "";
}
.arrow-wrapper::after
{
position: absolute;
content: "";
width: 0;
height: 0;
margin-top: 8px;
margin-left: 4px;
border-style: solid;
border-width: 16px 0 0 20px;
border-color: transparent transparent transparent white;
}

HTML:

<div class="wrapper">
    <div class="headline">
        <img class="image" width="36" height="36"/>
    </div>

http://jsfiddle.net/MkEJ9/417/

See if http://stackoverflow.com/questions/9990928/how-to-create-a-page-thats-split-diagonally-and-the-two-halves-are-clickable-li is helpful — Fabrizio Calderan, Dec 11 '14 at 10:56
Lilac this question is super duper, I was sooo excited to read it — Shlomi Schwartz, Dec 11 '14 at 13:32

score 4 · Accepted Answer · answered Dec 11 '14 at 12:40

You need to set the anchor point from where to apply the rotation. Your transform is changing the position, because it by default pivots from the center, which in this case is not what you want.

Use in your css:

.upper-triangle {
  ...
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  ...
}

Check this updated fiddle: http://jsfiddle.net/MkEJ9/420/

Note: in your fiddle I had to change the top to 10px.

score 0 · Answer 2 · answered Dec 11 '14 at 11:03

Maybe something like this works? fiddle

<script>
$(document).ready(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();

var width = viewportWidth;
var height = viewportHeight*0.6;

var imgSize = "100%" + ' ' + "100%";

$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});

$(window).resize(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();

var width = viewportWidth;
var height = viewportHeight*0.6;
var imgSize = width + ' ' + height;

$('.div').css("width", width);
$('.div').css("height", height);
$('.div').css("background-size", imgSize);
});

</script>

<style>
.div { background-image: url('http://indesignsecrets.com/wp-content/uploads/2010/07/step_1.jpg'); background-position: left top; background-repeat: no-repeat; background-color: yellow; }
</style>

<div class="div"></div>

score 0 · Answer 3 · answered Aug 10 '21 at 12:48

Better to use SVG, which gives nice responsive diagonal lines, works on almost all browsers.

.box {
    width: 20rem;
    height: 10rem;
    background-color: hsla(0, 0%, 70%, 0.3);
    cursor: pointer;
    position: relative;
}

.svg-stroke {
    position: absolute;
    width: 100%;
    height: 100%;
}

<div class="box">
    <svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
        <line x1='0' y1='0' x2='10' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
        <line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
    </svg>
</div>

Responsive diagonal lines css

3 Answers3