css – 在斜线上对齐文本

使文字在斜线上保持一致吗？它的对齐应该遵循倾斜的倾斜图像与IE9的必要支持？

我的例子code：

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>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.</p>
</div>

解决方法

WARNING: The shape-outside property should not be used in live projects¹. This answer is here just to show how the desired output can
be achieved with this property.

以下是使用shape-outside属性(modern webkit browsers only)的示例：

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%,15% 103%);
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a,paragraph.</p>
</div>

1 CSS Shapes Module Level 1实际(ai 2016)具有“候选推荐”的状态。这意味着它是一项正在进行的工作，它可能随时改变，因此不应该被用于测试以外。

使用shape-inside property可以实现相同的布局，并为文本指定一个包含框，但没有浏览器，我知道今天支持此属性。

对于跨浏览器方法，请参阅Tymek’s answer。

原文地址：https://www.jb51.cc/css/218355.html