javascript - 通过不同尺寸的div显示X

Question

问题

您将如何通过 div 显示一个 X的大小不同，所以它击中了所有四个 Angular ？我想要一个 solid 1px black从 div 的左上角 到右下角 的线, 和另一个 solid 1px black从右上角到左下角的线。

例子

如果您不明白我在说什么，请查看我的模型 here.

想法

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

代码

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

编辑

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

编辑 #2:有没有办法使用 HTML Canvas lineTo()将 div 的 Angular 作为值引用？

Answer 1

我认为一个可能的解决方案是在 background: 上使用 CSS linear-gradient:。您创建了一个渐变，其中两个颜色中断位于 50% 附近。 Se 中间断裂为黑色，其余为透明。这会留下一条细黑线供我们随意调整 Angular 。然后你只需复制它的渐变并镜像 Angular 。类似于下面的 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”始终位于图像的 Angular 落。您需要标准化图像的比例，或者编写一些 javascript 代码来动态地为每个图像执行此操作。

希望对您有所帮助。