CODEWITHSUNDEEP
htmlcssdiagonal
Lilac Oren
Lilac Oren

Reputation: 115

Responsive diagonal lines css

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/

Upvotes: 9

Views: 4532

Answers (3)

Kristine
Kristine

Reputation: 747

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>

Upvotes: 1

Justus Romijn
Justus Romijn

Reputation: 16019

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.

Upvotes: 5

sojin
sojin

Reputation: 4694

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>

Upvotes: 0

Related Questions