内联元素上的倾斜端盖

Question

目标：

设计要求带有可变文本的内联元素具有倾斜边。它足够长，它可能会换行，在这种情况下，边应该应用于最后一行（而不是整个块）。

我的尝试：

http://codepen.io/anon/pen/CjLpG

1. 添加范围
2. 在页面加载时，使用JS获取内联文本的高度
3. 创建一个css trapezoid
4. 使用相对定位来定位

可以使用，除了：

1. 它使用javascript
2. 当调整屏幕或文本大小时，它往往会偏离一个或两个像素。 Safari和Chrome似乎在应用舍入的位置上有所不同，因此我无法使其保持一致。

有没有更好的方法来实现这种效果？

其他失败的想法：

1. 花式定位的其他一些变化？
2. 任何东西+ skewX（它是内联的。没有骰子。我所有常用的嵌套技巧都在窗外。）

代码：

<mark>test text</mark><span class="edge">&nbsp;</span>

mark {
    background: #f00;
    padding: 0.1em;
}
mark + span {
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    border-right-width:10px;
    border-bottom-width:0;
    border-left-width:0;
    position:relative;
    pointer-events:none;
}

$(window).load(function() {
    $('mark + span').each(function(i,span) {
        var $span = $(span);
        var $mark = $span.prev('mark');
        var markHeight = $span.innerHeight();
        var markPaddingTop = Number($mark.css('padding-top').replace(/px/,''));
        var markPaddingBottom = Number($mark.css('padding-bottom').replace(/px/,''));
        $span.css({
          top: markHeight + markPaddingTop,
          'border-top-width': markHeight + markPaddingTop + markPaddingBottom
        })
    });
});

Answer 1

jQuery对于期望的效果来说太过分了。您可以使用绝对定位和:after伪类来简化所有内容。

mark {
    display: inline-block;
    position: relative;
    background: #f00;
    padding: 0.1em;
    min-height: 50px;
    box-sizing: border-box;
}

mark:after {
    position: absolute;
    display: block;
    left: 100%;
    bottom: 0;
    content: '';
    width: 0; 
    height: 0; 
    border-top: 0 solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 10px solid #f00;
}

50px有点武断，所以将其中的所有实例更改为您感兴趣的任何行高。

<强> CodePen