Question

CSS 中的

，如何实现以下功能： enter image description here

我的尝试：

<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 Fiddle demo

JS Fiddle demo, with a broader 'stroke' for the slope

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

更新以回应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 canvas。这是我的fiddle example。

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);
}

Fiddle

与2条线相连的斜坡：Fiddle

css线与中间的斜坡

3 个答案: