答案 0 :(得分:4)
据我所知,此时没有跨浏览器 css方式来执行此操作。所以我戴上了创意帽并为你写了一些东西。
function rhomboit(obj, offset) {
var invert = false;
if(offset < 0){
offset = Math.abs(offset);
invert = true;
}
var line_height = getLineHeight(obj);
var els = document.querySelectorAll('.rhombus_side');
for (var i = 0; i < els.length; i++) {
els[i].parentNode.removeChild(els[i]);
}
var new_height = heightWithOffset(obj, offset);
var total_lines;
var line_offset;
while (true) {
total_lines = Math.ceil(new_height / line_height);
line_offset = offset / (total_lines);
var next_height = heightWithOffset(obj, offset + line_offset);
if (next_height === new_height) break;
new_height = next_height;
}
for (var i = 0; i < total_lines; i++) {
var left_offset = line_offset * (i + 1);
var right_offset = offset - left_offset + line_offset;
if(invert){
var hold = left_offset;
left_offset = right_offset;
right_offset = hold;
}
var div = document.createElement('div');
div.className = 'rhombus_side';
div.style.width = left_offset + 'px';
div.style.height = line_height + 'px';
div.style.float = 'left';
div.style.clear = 'left';
//div.style.backgroundColor = 'red';
obj.insertBefore(div, obj.firstChild);
div = document.createElement('div');
div.className = 'rhombus_side';
div.style.width = right_offset + 'px';
div.style.height = line_height + 'px';
div.style.float = 'right';
div.style.clear = 'right';
//div.style.backgroundColor = 'blue';
obj.insertBefore(div, obj.firstChild);
}
}
function heightWithOffset(obj, offset) {
var old_padding_left = obj.style.paddingLeft;
obj.style.paddingLeft = (offset + 1) + 'px';
var new_height = obj.clientHeight;
obj.style.paddingLeft = old_padding_left;
return new_height;
}
function getLineHeight(element) {
//Thank you : http://stackoverflow.com/a/4515470/482197
var temp = document.createElement(element.nodeName);
temp.setAttribute("style", "border:0;margin:0px;padding:0px;font-family:" + element.style.fontFamily + ";font-size:" + element.style.fontSize);
temp.innerHTML = "test";
temp = element.parentNode.appendChild(temp);
var ret = temp.clientHeight;
temp.parentNode.removeChild(temp);
return ret;
}
//Below this is just my showing it with positive and negative offsets
var last_offset = 150;
function toggleRhombus(){
last_offset *= -1;
rhomboit(document.getElementById('rhombus'), last_offset);
setTimeout(function(){toggleRhombus()},5000);
}
toggleRhombus();
<div id='rhombus' style='border:1px solid black;text-align:justify'>This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text</div>
小提琴: http://jsfiddle.net/trex005/benjkr05/
如果您想了解它是如何工作的,请取消注释两个样式线
答案 1 :(得分:2)
您应该使用shape-inside, -webkit-shape-inside
。
由于我的浏览器不受支持,我无法为您提供更多帮助。请记住,这可能也是您的用户的问题。
更多信息请参见Adobe的blog post。