在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 支持就可以了
我需要能够修改斜坡部分的放置位置。（例如：将中间的斜坡部分向左移动一点）。
给定以下 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;
}
<a href="http://jsfiddle.net/davidThomas/M6FXZ/1/" rel="noreferrer">JS Fiddle 演示。
值得注意的是，虽然这显然是可能的（在支持伪元素的浏览器中），但这是一种过于复杂的方法，如果可能的话，应该使用基于画布或转换的解决方案）。
更新以响应 OP 的评论（如下）：
我已将 span{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;
}
结果是：
.
然后，去除容易看到的颜色，让我们稍微整洁，更大：
.
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>