我可以制作不规则的< div>形状只使用CSS？ [英] Can I make an irregular <div> shape using only CSS?

问题描述

我想用一个不规则六边形的形状来定义一个所有的直角（认为犹他州的形状，但不一定是方向）。

I'd like to style a div in the shape of an irregular hexagon with all right angles (think the shape of Utah, but not necessarily that orientation).

我在StackExchange上看到了一些关于按钮不规则形状（人们说使用图像）和使用不规则形状的三角形（人们说使用裁剪） ，但是没有到目前为止具有带有直角的不规则形状，作为父或子div。这是可能在CSS / 3中只使用一个div吗？ 这个问题似乎有希望（我想），但我'在CSS仍然是一个新手，它似乎更注重图像而不仅仅是容器div（我不认为有一个共识，或者）。

I've seen some questions on StackExchange regarding irregular shapes for buttons (people say to use an image), and using irregular shapes for triangles (people say to use clipping), but nothing so far on having an irregular shape with right angles, as a parent or child div. Is this possible using only a single div in CSS/3? This question seems promising (I think), but I'm still a novice at CSS and it seems to focus more on images than just container divs (and I don't think there was a consensus, either).

我必须以某种方式将两个div紧紧相邻，本着这个答案的精神？

Or will I have to somehow float two divs right next to each other, in the spirit of this answer?

推荐答案

这对于单个div是不可能的，因为div总是矩形的。请参阅此处的优秀答案，以获得更全面的解释：具有css3的不规则形状的div和html5

This will be impossible with a single div, because the div will always be rectangular. See the excellent answer here for a fuller explanation: div with irregular shapes with css3 and html5

编辑：这实际上可以通过 clip-path CSS属性， ZachSaucier在评论中。 演示 您每天都会学到新的东西！

This is actually possible with the clip-path CSS attribute, as helpfully pointed out by @ZachSaucier in the comments. Demo You learn something new every day!

这篇关于我可以制作不规则的< div>形状只使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！