响应式对角线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/

- Lilac Oren

---

请查看https://dev59.com/L2LVa4cB1Zd3GeqPukX_，看看是否有帮助。 - Fabrizio Calderan

紫丁香，这个问题超级棒，我看到它时非常兴奋。 - Shlomi Schwartz

Answer 1

您需要设置旋转的锚点位置。默认情况下，变换的中心点是居中的，因此会改变元素的位置，而这不是您想要的。

在CSS中使用以下代码：

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

请查看此更新后的代码片段： http://jsfiddle.net/MkEJ9/420/

注意：在你的代码片段中，我不得不将top更改为10px。

- Justus Romijn

Answer 2

最好使用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>

- sojin

Answer 3

或许像这样可以行得通？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>

- Kristine