响应式对角线css

Question

我需要帮助在 css 中设置对角线以适应通过移动设备的多种分辨率。 有一个宽度为 100% 的 div 和一条对角线，该对角线应该保留在该 div 内的适当位置，但每次我更改窗口的分辨率时，该线都会向上或向下移动。 一定有什么我能做的。

这是一个例子：

.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/

Answer 1

您需要设置要应用旋转的锚点。您的变换正在改变位置，因为它默认从中心旋转，在这种情况下这不是您想要的。

在你的CSS中使用：

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

检查这个更新的小提琴： http://jsfiddle.net/MkEJ9/420/

注意：在你的小提琴中，我必须将

top

更改为

10px

。

Answer 2

也许这样的东西有效？ 小提琴

<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>

Answer 3

最好使用 SVG，它可以提供漂亮的响应式对角线，几乎适用于所有浏览器。

.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>