Question

我有一系列不同高度的物品。如果该项目不再可用，我希望在整个容器上有一个大的“X”。这是我到目前为止所拥有的。

我正在进行轮换的方式显然有问题。我正在使用反正切，因为我知道相反（高度）和相邻（宽度）。

HTML

<div class="small square">
    <div class="one x-line"></div>
    <div class="two x-line"></div>
</div>
<div class="medium square">
    <div class="one x-line"></div>
    <div class="two x-line"></div>
</div>
<div class="big square">
   <div class="one x-line"></div>
   <div class="two x-line"></div>
</div>

CSS

.square {
   position: relative;
   width: 150px;
   margin-right: 5px;
   border: 2px solid green;
   display: inline-block;
   overflow: hidden;
}
.small.square {
    height: 100px;
}
.medium.square {
    height: 200px;
}
.big.square {
    height: 300px;
}
.x-line {
   position: absolute;
   top: 0px;
    left: 50%;
   width: 12px;
   height: 100%;
   margin-left: -6px;
   background: #EA323D;
}

JQuery的

$('.square').each(function (index, obj) {
    // get container dimensions
    var square_width = $(obj).width();
    var square_height = $(obj).height();

    // get the diagonal width
    var line_height = Math.sqrt((square_width * square_width) + (square_height * square_height));

    // used inverse tangent to get degrees
    var rotation = 57.29577 * Math.atan(square_height/square_width);

    var line_one = $(obj).find('.x-line.one');
    var line_two = $(obj).find('.x-line.two');
    $(line_one).css({
        height: line_height,
       transform: 'rotate(' + rotation + 'deg)'
    });
    $(line_two).css({
        height: line_height,
        transform: 'rotate(' + (-1 * rotation) + 'deg)'
    });
});

有什么建议吗？

Answer 1

要记住的一件事是Math.atan()和朋友以弧度返回值，而不是度数。幸运的是，rotate()可以采用弧度：

$(line_one).css({
    height: line_height,
    top: (square_height - line_height) /2,
    transform: 'rotate(' + rotation + 'rad)'
});
$(line_two).css({
    height: line_height,
    top: (square_height - line_height) / 2,
    transform: 'rotate(' + (-1 * rotation) + 'rad)'
});

我还添加了top覆盖，因为您注意到没有它，您的X会比您原本想要的低一些。

另外需要注意的是square_height和square_width应该颠倒，因为你的条形开始是垂直而不是水平：

var rotation = Math.atan(square_width/square_height);

我不会评论这是否是最佳方式，因为这在很大程度上是主观的。

Answer 2

我会选择仅限CSS的解决方案。这是我的快速尝试：

HTML：

<div class="small square out-of-stock"></div>
<div class="medium square out-of-stock"></div>
<div class="big square out-of-stock"></div>

<强> CSS：

.out-of-stock:before, .out-of-stock:after {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 50%;
    width: 12px;
    margin-left: -6px;
    height: 100%;
    background: red;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

.out-of-stock:after {
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
}

http://jsfiddle.net/dm3103d9/8/

然后，您可以定位不同的类并调整线条，颜色等的旋转。

更简单的方法是将面具设置为@ Hotted24建议，然后您可以使用backgroud-size: 100%来缩放十字架。祝你好运！

Answer 3

以度数旋转取值：

var rotation = 57.29577*Math.atan(square_width/square_height);

NB： 57.29577 = 360 /（2 * PI）

顺便说一句，使用一个透明背景作为元素的面具（在你的情况下基本上是一个十字架），你可以设置宽度和高度以获得一个很好的方式来适应它=）

制作大型＆＃34; X＆＃34;的最佳方式在元素上

3 个答案: