主页 / 问题 / 549173
Accepted
user33274
Asked:2020-07-27 23:11:03 +0000 UTC2020-07-27 23:11:03 +0000 UTC

如何沿斜线对齐文本？

  • 772

甚至没有代码示例：因为我没有想到该怎么做

在此处输入图像描述

Guru CSS3如何实现这个？

资源

找到一个有趣的解决方案示例

SO上的问题

在SO上找到的解决方案

.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>

这很酷，ARPIL GOYAL 给出了 100% 的结果

html

1 个回答

  1. Best Answer

    几乎没有什么复杂的，如果你不怕用野拐杖弄脏你的手的话）

    我看到两个解决方案：

    使用外部形状

    但是，不幸的是，这个选项绝对不能跨浏览器，只能在 webkit 引擎中使用： http: //caniuse.com/#feat=css-shapes

    一堆积木

    在三角形包装变体中，这很容易使用 JS 实现和自动化该过程。如果任务需要，我认为这个选项是完全可以接受的。当然如果wrapping shape比较复杂的话，用js自动创建block会非常困难。

    在我的示例中，我同时使用了这两个选项。

    有了形状，一切就很清楚了：我画了一个围绕三个点的流线，你就完成了。

    我使用 js 生成了“一堆块”：我创建了一个 300px 宽的块，然后使用 js 生成了后代，每个块短 10px。

    jsfiddle 示例：https ://jsfiddle.net/ipshenicyn/h2o9fbav/2/

    HTML

    <div class="shape-left"></div>
<div class="shape-right"></div>
<p>очень много текста</p>

    CSS

    环绕三角形代码：

    .shape-left- 这是我将用 js 生成的块

    .shape-right- 阻止使用shape-outside

    .shape-left{
    float: left;
    width: 300px;
    height: 10px;
    clear: both;
}
.shape-right{
    width: 400px;
    height: 400px;
    float: right;
    shape-outside: polygon(400px 0, 400px 400px, 0 400px);
}

    JS

    代码乘以.shape-left减小的宽度，从而创建一个三角形区域：

    var $el = $('.shape-left'),
    width = $el.width(),
    count = width / 10;

for(var i = 0; i < count; i++){
    width = $el.width();
    $el = $el.clone().css('width',width-10).insertAfter($el);
}
    • 20

相关问题