2

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

enter image description here

jeyhunms
  • 79
  • 10
  • 1
    Elements are generally rectangular. While you can arrange for the inset element to not be a child of the outset element, you'd still need some kind of placeholder to control how the content flows. – Ouroborus Apr 04 '21 at 00:59
  • Here is a very similar answer that may help you: [Changing div shape](https://stackoverflow.com/questions/41728050/how-do-i-change-the-shape-of-a-div/41728377) – Signor Gatto Apr 04 '21 at 07:34
  • @SignorGatto the answer you referenced is for standart '4 angled' div blocks – jeyhunms Apr 06 '21 at 00:43

1 Answers1

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415