将 shape-inside 与 CSS div 框一起使用时，防止文本被截断

Question

这是新手。我检查了很多资源，但我无法让它工作。

Objective：在 CSS div 框内使用 shape-inside 时，防止文本被截断。

这里有一个 link 无效的代码。

http://jsfiddle.net/0u8tk7o5/

谢谢你帮我。

.container {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0 100%);
  shape-inside: polygon(50% 0%, 100% 100%, 0 100%);
  height: 200px;
  width: 400px;
  background-color: crimson;
}
    </style>
  </head>
<body>

<div class="container">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>

Answer 1

shape-inside 好像还没有实现所以你需要使用 shape-outside 来达到你想要的效果。在您的情况下，您可以通过指定有效创建三角形的左右边界形状来实现三角形：

.main {
  width: 500px;
  background-color: yellow;
}
.left,
.right {
  width:50%;
  height:200px;
}
.left {
  -webkit-shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
  shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  float: left;
  background-color: crimson;
}
.right {
  -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  float: right;
  background-color: blue;
}
<div class="main">
<div class="left"></div>
<div class="right"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

这个 jsfiddle 显示了它：http://jsfiddle.net/g2rqa0uL/

将 shape-inside 与 CSS div 框一起使用时，防止文本被截断

Keep the text from being cut off when using shape-inside with CSS div boxes

css

css-shapes

将 shape-in​​side 与 CSS div 框一起使用时，防止文本被截断

Keep the text from being cut off when using shape-inside with CSS div boxes

css

css-shapes

将 shape-inside 与 CSS div 框一起使用时，防止文本被截断