在斜线上对齐文本

使用LESS

你们让我想到了更多的东西,所以我出来了我自己丑陋的解决方案.我的想法是添加一堆额外的方形元素并计算它的大小:

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

HTML:

  
  
  
  
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.

概念证明:http://codepen.io/Tymek/pen/jEypOX？editors = 110

@ chipChocolate.py,对我来说,原则问题是不要使用Javascript.如果有人想根据我的解决方案编写JS/jQuery代码,那么欢迎你.之后请在这里分享.

警告: 不应在实时项目中使用形状外部属性¹.这个答案仅用于说明如何使用此属性实现所需的输出.

以下是使用shape-outside属性的示例(仅限现代webkit浏览器):

DEMO

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 20px;
  -webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
  shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}

  
  
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
    luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
    paragraph.

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}
p {
  transform: skew(6deg);
  font-style: italic;
}

  
  
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
    luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
    paragraph.