可以打成波浪状吗? [英] Is it possible to make a squiggly line?
问题描述
如果我想画一条水平线，我会这样做:
If I wanted to make a horizontal line, I would do this:
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
如果我想画一条垂直线，我会这样做:
If I wanted to make a vertical line, I would do this:
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
曲线比较复杂，但是可以使用border-radius并包装元素:
A curved line is trickier, but possible using border-radius and wrapping the element:
<style>
.curve{
width:100px;
height:500px;
border:1px #000 solid;
border-radius:100%;
}
#wrapper{
overflow:hidden;
width:40px;
height:200px;
}
</style>
<body>
<div id="wrapper">
<div class="curve"></div>
</div>
</body>
但是我什至无法理解如何生成弯曲的线条！ 仅使用css(和javascript，因为似乎确实有必要能够更轻松地生成它们)甚至可以远程实现这一点.
But I cannot even fathom how I could generate squiggly lines! Is this even remotely possible using only css (and javascript since it does seem that it will be necessary to be able to more easily generate them).
不出所料，鉴于您的回答，没有办法在单独的CSS中执行此操作... javascript和jquery可以100％满足您的回答... 无法使用图片
As expected, given your answers there is no way to do this in sole css...javascript and jquery are 100 percent okay for your answer...NO IMAGES CAN BE USED
推荐答案
这个问题已经很老了，但是我找到了一种不用Javascript，重复CSS或图像的方法.
This question is fairly old, but I found a way to do with without Javascript, repetitive CSS or images.
使用background-size，您可以重复一个模式，该模式可以使用线性梯度或径向梯度通过纯CSS创建.
With background-size you can repeat a pattern, which can be created with pure CSS using linear-gradient or radial-gradient.
我在此处放置了很多示例: http://jsbin.com/hotugu /edit?html，css，输出
I put a bunch of examples here: http://jsbin.com/hotugu/edit?html,css,output
基本要点是:
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div>
您可以通过一些修改产生一些令人信服的波浪线:
You can produce some convincing squiggly lines with some modifications:
.holder {
position: relative;
width: 200px;
height: 50px;
top: 25px;
}
.tinyLine {
position: absolute;
/* Cuts off the bottom half of the pattern */
height: 20px;
/* For better cross browser consistency, make it larger with width. */
width: 1000%;
/* And then scale it back down with scale, recentering with translateX. */
transform: translateX(-45%) scale(0.1);
}
.tinyLine1 {
background: linear-gradient(45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine2 {
background: linear-gradient(-45deg, transparent, transparent 49%, red 49%, transparent 51%);
}
.tinyLine {
/* Must be after background definition. */
background-size: 40px 40px;
}
<div class="holder">
<div class="tinyLine tinyLine1"></div>
<div class="tinyLine tinyLine2"></div>
</div>
浏览器支持正常( http://caniuse.com/#feat=css-gradients )，IE 10可能会运行，但是在不同的浏览器中会出现小范围的故障.如果您希望它在很小的比例尺上始终如一地工作，则可能需要在更大的比例尺上进行缩放，然后使用transform: scale(x);缩小比例.
The browser support is okay (http://caniuse.com/#feat=css-gradients), IE 10 will probably work, however things break down at small scales in different browsers. If you want it to work on really small scales consistently you may want to make the line on a larger scale and then scale it down with transform: scale(x);.
它也应该非常快，线性渐变以chrome形式呈现在GPU上.
It should also be very fast, linear-gradients are rendered on the GPU in chrome.
这篇关于可以打成波浪状吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
