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

问题描述

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

I want to create a special HTML div which has 6 angles instead of 4 angles. I want text content of 6 angled div adjust to shape accordingly. Is there any way to achieve this? I want to use 2 (NOT NESTED) div elements (or possible other HTML block elements).

推荐答案

float 就是为此而生的.

float is made for this.

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

这篇关于创建具有 6 个角度而不是 4 个角度的自定义 HTML div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！