通过< div>或< span>

问题描述

我想要一条从< div> 或< span> 到左下角。问题是内容有时会更长或更短。所以，像静态图像的东西不会工作。基本上我想要这里描述的内容（），但对于< div> 或< span> 。

I'm wanting to have a diagonal line drawn from the upper-right corner of a <div> or <span> to the lower-left corner. The problem is that the content will sometimes be longer or shorter. So, something like a static image won't work. Basically I want what's described here (How to create a diagonal line within a table cell?) but for a <div> or a <span>.

这有一些有趣的想法：

This has some interesting ideas: http://jsfiddle.net/zw3Ve/11/

这样做：

这是一种重试在此信息：

This is kind of a retry at this post: How to strike through obliquely with css

我似乎没有想到这一点。看起来像一个纯CSS解决方案应该在这里工作，但我只是没有技能，使这种情况发生。

I can't seem to figure any of this out though. It seems like a pure CSS solution should work here, but I just don't have the skills to make that happen. jQuery is an option for me as well.

推荐答案

作为示例，背景中的图像是否不够好？

Is first fiddle as example with image in background instead not good enough?

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

这篇关于通过< div>或< span>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！