Objective:
I have a design that requires an angled edge on inline elements containing variable text. If the text wraps onto multiple lines, the edge should only be applied to the last line, rather than the entire block of text.
My Solution:
http://codepen.io/anon/pen/CjLpG
- Insert a span element
- Use JavaScript to dynamically determine the height of the inline text upon page load
- Create a CSS trapezoid shape
- Utilize relative positioning to correctly position the edge
Current Challenges:
- The solution relies on JavaScript
- There is a slight discrepancy in alignment when resizing the screen or changing the text size. Different browsers (such as Safari and Chrome) interpret rounding differently, causing inconsistency.
Are there alternative methods to achieve this effect more effectively?
Unsuccessful Approaches:
- Exploring other complex positioning techniques
- Attempting various skewX transformations (not feasible for inline elements)
Implementation Code:
<mark>test text</mark><span class="edge"> </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
})
});
});