Create custom HTML div which has 6 angles instead of 4 angles

user_2543216 0
Viewed 186

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

twitter-bootstrap frontend css html
1 Answers

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>

user_86203330
Related