javascript - Is it possible to have a non-rectangular div?

Question

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

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 divs.

score 12 · Accepted Answer

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

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

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

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

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

这个标记的唯一怪癖是内容区域 - 您在图像中绘制的区域 - 它是两个 div，而不是一个。因此，文本不会像您期望的那样换行和流动。此外，这在较旧的 (IE6-7) 浏览器上可能效果不佳。但 FF、Chrome、Safari、Opera 应该没问题。

score 2 · Accepted Answer

请参阅此jsFiddle 示例：

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

score 1 · Accepted Answer

1

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

于 2011-06-22T17:39:48.860 回答

score 1 · Accepted Answer

我能想到的两个选择：

1) 给 div 一个背景图片并使用 CSS 伪类 :hover 将背景图片更改为表示悬停状态的背景图片

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

score 1 · Accepted Answer

不，Divs 总是矩形的。您可以通过多种方式伪造它（使用背景图像是一种选择）。

至于使用两个 DIV，当然可以。悬停可以使用 CSS3 和父 div 的子选择器完成，或者您可以使用 JavaScript 在悬停在其中任何一个上时更改两个 div 的类。

score 1 · Accepted Answer

除非您使用背景图片，否则绝对需要两个或三个 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;}

score 0 · Accepted Answer

 <!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>

您可以将 CSSPIE 用于 IE 的圆角

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

请记住，在其中流动内容将非常困难。

score 0 · Accepted Answer

使用伪元素的一个 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>

javascript - Is it possible to have a non-rectangular div?

10 回答 10

Related

Reference