css线与中间的斜坡

Question

在CSS中,我如何实现以下目标:

我的尝试:

<div id="slope"></div>

#slope{
    width: 100px;
    border-top: 20px solid #000;
    border-right: 90px solid #fff;
}

但后来我坚持如何使这个东西看起来像一条线而不是一个坚实的

我已经尝试过raphael JS,但是我需要将这个元素与jQuery的动画结合使用,raphael使用SVG并且似乎不能很好地使用jQuery

css3/html5没关系,只要safari/chrome支持它就可以了

我需要能够修改斜坡部分的位置.(例如:将中间的斜坡部分向左移动一点).

Answer 1

给出以下HTML:

<span class="left"></span><span class="slope"></span><span class="right"></span>?

以下CSS可以按照您的意愿执行,根据.left元素的宽度向左或向右移动"斜率" :

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}
span.left {
    position: relative; /* to allow for the element to be shifted slightly */
    top: 0.15em; /* to join the border with the slope of the next element */
    width: 5em;
    border-top: 0.15em solid #000;
}

span.right {
    width: 10em;
    border-bottom: 0.15em solid #000;
}

span.slope {
    position: relative; /* to allow the generated content to be 
                           positioned relative to this one */
    background-color: #000; /* the 'slope' color */
    overflow: hidden;
    width: 1em; /* affects the 'width' of the slope */
}

span.slope::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border: 0.45em solid #fff; /* masks the background-color of the span */
    border-top-color: transparent; /* allows the ::after element's 
                                      borders to show through */
    border-right-color: transparent;
}

span.slope::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: 0.45em solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

JS提琴演示.

JS Fiddle演示,斜坡更广泛的"笔触".

值得注意的是,虽然这显然是可能的(在支持伪元素的浏览器中),但这是一种过于复杂的方法,如果可能的话,可能应该使用画布或基于转换的解决方案.

更新以回应OP的评论(下文):

我已经将跨度{min-height:1em}更改为更高的值但是斜率似乎没有根据高度进行调整....或者我做错了什么？

改变span元素的高度应该有效,但是你会得到奇怪的结果; 以下CSS更改(未更改的CSS):

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}

导致这个:

这可能看起来很奇怪,但是如果你还记得我们使用生成内容的边框来隐藏.slope元素的背景颜色那么它更有意义,特别是如果我们为这些边框分配替代颜色:

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.45em solid #f00;
}
span.slope::after{
    border: 0.45em solid #f90;
}

在这一点上,很明显,为了保持斜率的"宽度",我们还需要增加生成内容的边框宽度:

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.95em solid #f00;
}
span.slope::after{
    border: 0.95em solid #f90;
}

结果如下:

.

然后,去除易于看见的颜色,使我们略微整洁,更大:

.

Answer 2

使用html5画布.这是我的小提琴示例.

JS:

var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{ 
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,10);
    ctx.lineTo(120,30);
    ctx.lineTo(220,30);
    ctx.stroke();
} 
else 
{
    alert('Not supported');
}
?

HTML:

 <canvas id="mycanvas"></canvas>?

Answer 3

使用transform和rotate.

.slope{
    margin-top: 30px;
    width: 100px;
    border-bottom: solid 3px black;
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
} 

小提琴

斜坡连接2条线:小提琴