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

Question

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

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

Answer 1

Да, вы можете сделать это, используя HTML и CSS следующим образом: http://jsfiddle.net/broofa/364Eq/

По сути, для объединения событий мыши используются три элемента div, например:

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

И я использую правило: hover для внешнего элемента, чтобы влиять на цвета границ на внутренних элементах:

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

Единственная изюминка этой разметки заключается в том, что область содержимого - область, которую вы нарисовали на своем изображении, - это то, что это два деления, а не один. Поэтому текст не будет переноситься так, как вы могли бы ожидать. Кроме того, это может не очень хорошо работать в старых (IE6-7) браузерах. Но FF, Chrome, Safari, Opera, вероятно, должны быть в порядке.

Answer 2

См. Пример jsFiddle :

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

Answer 3

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

Вот решение с тремя делениями

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 4

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

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

Answer 5

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

1) дать div фоновое изображение и использовать псевдокласс CSS: hover, чтобы изменить фоновое изображение на то, которое указывает состояние наведения

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

Answer 6

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

Answer 7

Решение с одним делением с использованием псевдоэлементов:

/* 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>

Answer 8

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

Answer 9

Используйте несколько элементов div, как предлагали другие.

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

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

Answer 10

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