CODEWITHSUNDEEP
javascriptcsshtml
ujjwal mukherjee
ujjwal mukherjee

Reputation: 26

Changing shape of div element

i have a div element with some text in it and i want to shape my div element like a polygon or hexagon and i want the text to be in it the same way. Is there any way to do it?

Upvotes: 0

Views: 2028

Answers (3)

Facundo Corradini
Facundo Corradini

Reputation: 3913

I think everybody (including the OP for whatever reason) are missing the part of "i want the text to be in it the same way"

That's the tricky part here. If you make the shape with clip-path, the text will still be boxy, and will be butchered out. 

div{
  width:200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

p{color:white; background:steelblue}
<div> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>

While any other regular way of drawing the polygon will have the text behaving as a square, not interacting with the shape at all.

The only way I can think of is using shape-outside, and drawing the shape by negatives. Something like:

.polygon{
  width:300px;
  height:200px;
  background-color:steelblue;
}

.top-left, .top-right{
  width: 50%;
  height: 100%;
  background-color:white;
}

.top-left {
  shape-outside: polygon(0 0, 0 50%, 100% 0);
  clip-path: polygon(0 0, 0 50%, 100% 0);
  float: left;
}

.top-right {
  shape-outside: polygon(0 0, 100% 50%, 100% 0);
  clip-path: polygon(0 0, 100% 50%, 100% 0);
  float: right;
}

p{
  color:white;
  padding:1em;
  word-break:break-all
}
<div class="polygon">
  <div class="top-left"> </div>
  <div class="top-right"> </div>
  <p>Lorem ipsum dolor sit, amet consectetur adipi sicing elit. Enim eos magnam similique id expedita quibusdam, fuga, corporis doloremque sit dicta sint atque laboriosam repellat, exercitationem hic! Saepe necessitatibus tempora rerum</p>
</div>

This is, of course, ridiculously complex, fragile and incompatible with IE, Edge, and Firefox. There is a polyfill available though.

Upvotes: 1

Joe Moisan
Joe Moisan

Reputation: 23

Did you look at How to recreate 6 hexagon shape background in css? ? This seems to be a very similar scenario, with some interesting additions to also chain hexagons together.

Upvotes: 0

Theia
Theia

Reputation: 165

As far as I know, changing the shape of a single div into a hexagon or other polygon can not be done. But there is way of doing triangles, hexagons and other using css: 

.hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="hexagon"> <div class="content"> asdf </div> </div>

That was from http://csshexagon.com
You can also look in here to see more examples of other shapes: https://css-tricks.com/examples/ShapesOfCSS/

As I said, this is as far as I know, maybe there is a way of doing so, but I think this is easier

I edited the answer and added the content for it to be centered in the hexagon.

Upvotes: 0

Related Questions