Возможно ли иметь непрямоугольный div?

Мне нужно сформировать тег ONE div в следующей форме:

Можно ли перевернуть браузер? Мне не обязательно нужны закругленные углы. Мне нужно это, чтобы я мог изменить цвет границ всего div при наведении, поэтому я предполагаю, что этого не может быть достигнуто с помощью двух div s.

Ответы

Ответ 1

Да, вы можете сделать это с помощью 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, вероятно, будут в порядке.

Ответ 2

Смотрите пример jsFiddle:

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

Ответ 3

Вы можете использовать карту или использовать 2 divs и изменять границы, чтобы они выглядели как одна форма.

Ответ 4

два варианта, о которых я могу думать:

1) дайте div фоновое изображение и используйте псевдо-класс CSS: наведите указатель мыши на изменение фонового изображения на изображение, указывающее состояние зависания

2) поместите три div внутри обертки и расположите их так, чтобы у вас был один в верхнем левом углу, а затем два уложены друг на друга, чтобы вы могли имитировать верхнюю половину большего отсутствующего div верхняя левая половина границы. Я не думаю, что CSS alonw может настроить таргетинг на все div, чтобы изменить их границы, поэтому, вероятно, придется использовать JS для выполнения поведения наведения, применяя обработчик событий ко всем трем div.

Ответ 5

Нет. Divs ВСЕГДА прямоугольные. Вы можете подделать его несколькими способами (одним из вариантов будет использование фонового изображения).

Как для использования двух DIV, вы могли бы это сделать. Наведение может быть выполнено с помощью CSS3 и дочерних селекторов родительского div, или вы могли бы JavaScript изменить класс обоих div при зависании над одним из них.

Ответ 6

Определенно требуется два или три div, если вы не используете фоновое изображение

Здесь решение с тремя 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;}

Ответ 7

Возможно, вы могли бы использовать Border-radius вместе с 2 или 3 div, чтобы получить нужный вам вид. Единственная проблема в том, что она не поддерживается во всех браузерах.

Ответ 8

Используйте несколько divs, как предложили другие.

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

Имейте в виду, что в этом будет очень сложно передать содержимое.

Ответ 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>

Вы можете использовать CSSPIE для закругленных указателей для IE

Ответ 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>