Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
665 views
in Technique[技术] by (71.8m points)

html - Diagonal line through <div> or <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/

So does this: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1

This is kind of a retry at this post: How to strike through obliquely with 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can do this with an inline SVG background, using only CSS and no javascript.

.background {
   // Draw an SVG top left to bottom right 
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
   background-repeat:no-repeat;
   background-position:center center;
   //scale it 
   background-size: 100% 100%, auto;
}

See my fiddle:

http://jsfiddle.net/3GWw2/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...