Geyan Geyan - 1 year ago 106
CSS Question

How to align text on a sloping line?

Even the example code does not have: because it never occurs how to do:
enter image description here

How to implement, so that text is wrapped such that it forms a shape?

Answer Source

Here's a working Snippet / JSBin with a different shape, you can achieve same with other images too

.element{
  shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Triangle-grey.svg/2000px-Triangle-grey.svg.png);
  shape-image-threshold: 0.2;
  float: left;
  height: 300px;
  padding: 0 20px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h2>CSS shapes / dLotus</h2>
  <img class='element' src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Triangle-grey.svg/2000px-Triangle-grey.svg.png" alt="">
  <div>
      <p>Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…Lorem ipsum…</p>
  </div>
</body>
</html>

Read more here: Working with Shapes | CSS Tricks

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download