Question

问题

你将如何展示 X 到div的不同大小，以便它能够击中所有四个角落？我希望一条solid 1px black行从左上角转到div的右下角，另一条solid 1px black行从右上角转到左下角。

实施例

如果您没有关注我正在谈论的内容，请查看我的模型here.

思想

我能想到的解决这个问题的唯一方法，根本不是一个解决方案，而只是思考如何实现它的起点。我想我在div的中心有两条solid 1px black行，然后在一行上使用CSS transform: rotate (45deg)，另一行使用transform: rotate (-45deg)。当然，这不适用于任何大小的div，因为45度的旋转只适用于正方形<div>。我有一种感觉，我需要一些 javascript 来计算旋转角度。我真的更喜欢纯CSS解决方案，但我不确定CSS是否能够实现这一目标。

代码

Here是我目前拥有的代码。 X 将通过.overlay类放置。

修改

编辑＃1 ：如果有帮助，我的所有图片都是相同的宽度。

编辑＃2 ：有没有办法使用HTML Canvas lineTo()来引用div的角落作为值？

Answer 1

我认为一个可能的解决方案是linear-gradient:上的CSS background:。您创建一个渐变，其中两个颜色中断位于50％附近。中间休息为黑色，其余为透明。这为我们留下了一条细黑线，但我们想要的却是这样。然后你只需复制它的渐变并镜像角度。类似下面的CSS：

.image:hover .overlay {
  //your other exising styles
  background-image: -webkit-gradient(linear, left top, right bottom, 
  color-stop(49%,transparent), 
  color-stop(49%,#000000), 
  color-stop(50%,transparent)), 

  -webkit-gradient(linear, right top, left bottom, 
  color-stop(49%,transparent), 
  color-stop(49%,#000000), 
  color-stop(50%,transparent));  
}

<强> EXAMPLE DEMO FIDDLE

唯一剩下的问题是，由于您的图像在宽高比方面有所不同，因此您的“X”始终不会碰到图像的角落。您需要标准化图像的比例，或编写一些动态地为每个图像执行此操作的JavaScript。

希望有所帮助。

通过不同大小的div显示X.

问题

实施例

思想

代码

修改

1 个答案: