Question

我需要在以下形状中塑造 ONE div标记：

是否可以跨浏览器？我不一定需要圆角。我需要它，所以我可以在悬停时更改整个div的边框颜色，所以我认为使用两个div无法实现它。

Answer 1

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

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

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

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

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

这个标记的唯一怪癖是内容区域 - 你在图像中绘制的区域 - 是两个div，而不是一个。所以文本不会以你期望的方式包装和流动。此外，这在旧版（IE6-7）浏览器上可能无法正常工作。但FF，Chrome，Safari，Opera应该没问题。

Answer 2

请参阅此jsFiddle example：

<div id="main">    
    <div id="div1" class="border">
        &nbsp;
    </div>
    <div id="div2" class="border">
        &nbsp;
    </div>
</div>

Answer 3

您可以使用地图或使用2个div并更改边框，使其看起来像一个形状。

Answer 4

我能想到的两个选项：

1）给div一个背景图像并使用CSS伪类：悬停将背景图像更改为指示悬停状态的图像

2）将三个div放在一个包装内，然后将它们放在左上角，然后将两个堆叠在一起，这样你就可以模拟一个较大的div缺失的上半部分左上半边框。我不认为CSS alonw可以针对所有div来改变它们的边界，因此可能必须使用JS来执行悬停行为，方法是将事件处理程序应用于所有三个div。

Answer 5

没有。 Div总是长方形的。你可以通过多种方式伪造它（使用背景图像是一种选择）。

至于使用两个DIV，你一定可以。可以使用CSS3和父div的子选择器来完成悬停，也可以使用JavaScript在将鼠标悬停在其中任何一个上时更改两个div的类。

Answer 6

除非您使用背景图像，否则绝对需要两个或三个div

这是一个三格解决方案

http://jsfiddle.net/pxfunc/SUuF6/

它的跨浏览器兼容。悬停在IE6中不起作用，但它将在IE7 +中。圆角将根据浏览器支持显示

<强> HTML：

<div id="fancyShape">
    <div id="main">&lt;div&gt;</div>
    <div id="panHandle"></div>
</div>

<强> CSS：

#fancyShape {position:relative;width:504px;height:304px;}

#main {
    margin-left:100px;
    width:400px;
    height:300px;
    border:solid 2px #000;
    border-radius:0 15px 15px 15px;

}
#panHandle {
    width:100px;
    height:120px;
    position:absolute;
    top:0;left:0;
    border-top:solid 2px #000;
    border-left:solid 2px #000;
    border-bottom:solid 2px #000;
    border-radius:15px 0 0 15px;
}

/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}

Answer 7

也许您可以使用Border-radius以及2或3个div来获得您想要的外观。唯一的问题是它并不是所有浏览器都支持。

Answer 8

使用多个div，正如其他人所建议的那样。

http://jsfiddle.net/thomas4g/7B5MA/14/

请记住，在此处流动内容非常困难。

Answer 9

 <!DOCTYPE HTML>
 <html>
 <head>

 <style>
 html{height: 100%; width: 100%;}
 body{height: 100%; width: 100%;}

 #wrapper{
 position: relative;
 top: 50px;
 right: 25%;
 width: 565px;
 height: 440px;
 margin: 0 auto;
 padding: 0px;
 }
 #left{
 position: absolute;
 width: 100px;
 height: 50px;
 border: 2px solid black;
 border-right: none;
 -moz-border-radius-bottomleft: 10px; 
 border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-left-radius: 10px;
 background-color: #ffffff;
 }
 #right{
 position: absolute;
 left: 100px;
 width: 440px;
 height: 440px;
 border: 2px solid black;
 -moz-border-radius: 10px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 border-radius: 10px;
 padding-left: 25px;
 }
 </style>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">    </script>
 <script type="text/javascript">
  $(document).ready(function(){
  $('#wrapper').hover(
   function () {
  $(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid red'});
  }, 
  function () {
  $(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid black'});
 });
 });
 </script>

 </head>
 <body>

 <div id="wrapper">
 <div id="right">Some content here</div>
 <div id = "left"></div>
 </div>

 </body>
 </html>

您可以将CSS用于IEp的圆角>

Answer 10

使用伪元素的一个div解决方案：

/* relevant styles for shape */
.tab {
  border-top-left-radius: 0px;
  margin-left: 100px;
}

.tab:before {
  content:"";
  display: block;
  position: relative;
  height: 50px;
  width: 50px;
  right: 52px; /* width + border width */
  top: -2px;
  background-color: white;
  border: inherit;
  border-right-width: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* styles to look like example */
div{
  box-sizing: border-box;
  background-color: white;
  border: 2px solid red;
  height: 100px;
  width: 200px;
  border-radius: 5px;
}

div:hover {
  border-color: green;
}

<div class="tab"></div>

是否可以使用非矩形div？

10 个答案: