html - 创建具有 6 个 Angular 而不是 4 个 Angular 自定义 HTML div

Question

我想创建一个特殊的 HTML div，它有 6 个 Angular 而不是 4 个 Angular 。我希望 6 Angular div 的文本内容相应地调整形状。有什么办法可以做到这一点？我想使用 2 个(未嵌套)div 元素(或其他可能的 HTML block 元素)。

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