Question

我有一个div元素，里面有一些文字，我想把我的div元素塑造成多边形或六边形，我希望文本以同样的方式存在。有没有办法做到这一点？

Answer 1

我认为每个人（无论出于何种原因包括OP）都缺少＆＃34;我希望文本以同样的方式存在于其中＃34;

这是棘手的部分。如果你使用剪辑路径创建形状，文本仍将是四四方方的，并将被删除。

＆＃13;

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

＆＃13;

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

＆＃13;

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

我能想到的唯一方法是使用外形，并通过底片绘制形状。类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

据我所知，无法将单个div的形状更改为六边形或其他多边形。但是有使用css做三角形，六边形等的方法：

.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="hexagon"> <div class="content"> asdf </div> </div>

那来自http://csshexagon.com
您还可以在此处查看其他形状的更多示例：https://css-tricks.com/examples/ShapesOfCSS/

正如我所说，据我所知，也许有办法这样做，但我认为这更容易

我编辑了答案并添加了内容，使其以六边形为中心。

Answer 3

你看过How to recreate 6 hexagon shape background in css?了吗？这似乎是一个非常相似的场景，还有一些有趣的补充，也是将六边形链接在一起。

改变div元素的形状

3 个答案: