是否可以有一个非矩形div？ [英] Is it possible to have a non-rectangular div?

问题描述

我需要以下列形状塑造 ONE div标签：

I need to shape ONE div tag in the following shape:

是否可以让它跨浏览器？我不一定需要圆角。我需要它，所以我可以改变整个div的边框的颜色悬停，所以我认为它不能实现通过使用两个div。

Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two div's.

推荐答案

是的，你可以使用HTML和CSS这样做： http://jsfiddle.net/broofa/ 364Eq /

Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/

它基本上使用三个div来聚合鼠标事件，如下：

It's essentially using three divs to aggregate the mouse events, like so:

<div id="outer">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

我在外部元素上使用：hover规则来影响内部div的边框颜色：

And I use a :hover rule on the outer element to affect the border colors on the inner divs:

#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}

这个标记唯一的奇怪是内容区域 - - 是的，它是两个div，而不是一个。所以文本不会包装和流动的方式，你可能期望。此外，这可能不工作这么好在老（IE6-7）浏览器。但FF，Chrome，Safari，Opera应该可以了。

The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.

这篇关于是否可以有一个非矩形div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！