创建具有 6 个角度而不是 4 个角度的自定义 HTML div答案

【问题标题】：Create custom HTML div which has 6 angles instead of 4 angles创建具有 6 个角度而不是 4 个角度的自定义 HTML div
【发布时间】：2021-06-30 08:58:56
【问题描述】：

我想创建一个特殊的 HTML div，它有 6 个角度而不是 4 个角度。我希望 6 角 div 的文本内容相应地调整形状。有没有办法实现这一目标？我想使用 2 个（未嵌套）div 元素（或其他可能的 HTML 块元素）。

【问题讨论】：

元素通常是矩形的。虽然您可以安排 inset 元素不是 outset 元素的子元素，但您仍然需要某种占位符来控制内容的流动方式。
这是一个非常相似的答案，可能会对您有所帮助：Changing div shape
@SignorGatto 您引用的答案是标准的“4 角”div 块

标签： html css twitter-bootstrap frontend

【解决方案1】：

float 就是为此而生的。

.box {
  width:400px;
  padding:20px;
  border:2px solid;
  background:lightblue;
  clip-path:polygon(82px 0,100% 0,100% 100%,0 100%,0 82px,82px 82px); /* hide the float part*/
}
.box::before {
  content:"";
  float:left;
  width:80px;
  height:80px;
  margin:-20px 20px 20px -20px;
  border-right:2px solid;
  border-bottom:2px solid;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id urna eu augue posuere euismod lobortis sed sem. Etiam sed enim nec augue ultrices ultrices vestibulum in justo. Nunc nec euismod urna. In tincidunt, magna molestie elementum venenatis, enim tortor consequat leo, nec ullamcorper purus lorem at ante. In tincidunt, magna molestie elementum venenatis, enim tortor consequat leo, nec ullamcorper purus lorem at In tincidunt, magna molestie elementum venenatis, enim tortor consequat leo, nec ullamcorper purus lorem at
</div>

【讨论】：