javascript - 改变 div 元素的形状

Question

我有一个包含一些文本的 div 元素，我想将我的 div 元素塑造成多边形或六边形，我希望文本以相同的方式出现在其中。有什么办法吗？

Answer 1

我认为每个人(无论出于何种原因包括 OP)都缺少“我希望文本以相同的方式包含在其中”

这是棘手的部分。如果你用 clip-path 制作形状，文本仍然是四四方方的，并且会被裁掉。

div{
  width:200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

p{color:white; background:steelblue}

<div> 
  <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</p>
</div>

虽然任何其他绘制多边形的常规方法都会使文本表现为正方形，但根本不与形状交互。

我能想到的唯一方法是使用 shape-outside，并通过底片绘制形状。像这样的东西:

.polygon{
  width:300px;
  height:200px;
  background-color:steelblue;
}

.top-left, .top-right{
  width: 50%;
  height: 100%;
  background-color:white;
}

.top-left {
  shape-outside: polygon(0 0, 0 50%, 100% 0);
  clip-path: polygon(0 0, 0 50%, 100% 0);
  float: left;
}

.top-right {
  shape-outside: polygon(0 0, 100% 50%, 100% 0);
  clip-path: polygon(0 0, 100% 50%, 100% 0);
  float: right;
}

p{
  color:white;
  padding:1em;
  word-break:break-all
}

<div class="polygon">
  <div class="top-left"> </div>
  <div class="top-right"> </div>
  <p>Lorem ipsum dolor sit, amet consectetur adipi sicing elit. Enim eos magnam similique id expedita quibusdam, fuga, corporis doloremque sit dicta sint atque laboriosam repellat, exercitationem hic! Saepe necessitatibus tempora rerum</p>
</div>

当然，这非常复杂、脆弱且 incompatible with IE, Edge, and Firefox.有 a polyfill available though .