muszę kształtować ONEdiv tag w następującym kształcie:Czy możliwe jest posiadanie nie prostokątnego elementu div?
Czy to możliwe, aby krzyż przeglądarka? Niekoniecznie potrzebuję zaokrąglonych narożników. Potrzebuję go, aby zmienić kolor obramowania na cały div po najechaniu myszą, więc zakładam, że nie można tego osiągnąć, używając dwóch s. div.
Możesz użyć mapy lub użyć 2 elementów div i zmienić krawędzie, aby wyglądał jak jeden kształt.
dwie opcje, które mogę myśleć:
1) dają div obrazu tła i użyć CSS klasy pseudo: hover, aby zmienić obraz tła do jednego, który wskazuje stan najechania
2) wprowadzenie trzy div znajdują się wewnątrz owijki i ustaw je tak, aby jedna znajdowała się w lewym górnym rogu, a następnie dwie ułożone jedna na drugiej, aby można było zasymulować górną połowę większego elementu div bez górnej lewej górnej granicy. Nie sądzę, aby alonw CSS mógł zaatakować wszystkich div w celu zmiany ich granic, więc prawdopodobnie będzie musiał użyć JS, aby wykonać zachowanie na hover, przez zastosowanie procedury obsługi zdarzeń do wszystkich trzech div.
Poszedłbym tutaj z numerem 1 - to prawdopodobnie najprostsze rozwiązanie tego problemu. Alternatywnie możesz prawdopodobnie użyć kształtu SVG, ale to prawdopodobnie nieco bardziej skomplikowane (plus nie będzie działać w starszych przeglądarkach itp.). –
jak dla # 2, inne dostarczyły rozwiązanie 2 div, które też by działało. – thescientist
Dotyczy: # 1, Używanie obrazów tła to _fail_. Bardzo trudno zastosować różne kolory, wymaga załadowania dodatkowych zasobów na stronę ... po prostu generalnie zły pomysł. Re # 2, odpowiedź jest po prostu błędna. : najedź na zewnętrzne prace DIV (patrz przykład jsfiddle w mojej odpowiedzi) – broofa
Być może możesz użyć Border-radius wraz z 2 lub 3 elementami div, aby uzyskać pożądany wygląd. Jedynym problemem jest to, że nie jest obsługiwany we wszystkich przeglądarkach.
Tak, można to zrobić za pomocą HTML i CSS tak: http://jsfiddle.net/broofa/364Eq/
To zasadniczo za pomocą trzech div agregowanie zdarzeń myszy, tak jak poniżej:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
I używam: Zasada aktywowanych na elemencie zewnętrznym wpływa na kolory granicznych na wewnętrznych div:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
Jedyne dziwactwo z tym znaczników jest to, że obszar zawartości - obszar narysowałeś w obrazie - jest to, że to dwa divy, a nie jeden. Tak więc tekst nie będzie się owijał i płynie tak, jak można by oczekiwać. Ponadto może nie działać tak dobrze w starszych przeglądarkach (IE6-7). Ale FF, Chrome, Safari, Opera powinny być w porządku.
Nr DIV są ZAWSZE prostokątne. Można go sfałszować na wiele sposobów (jednym z dostępnych wariantów byłby obraz tła).
Jeśli chodzi o używanie dwóch DIV, na pewno można. Zawiesić można za pomocą CSS3 i selektorów podrzędnych div jednostki nadrzędnej lub można JavaScript, aby zmienić klasę obu div po najechaniu na jeden z nich.
Użyj wielu elementów div, jak sugerowali inni.
http://jsfiddle.net/thomas4g/7B5MA/14/
Należy pamiętać, że to będzie bardzo trudne do przepływu materiałów w tym.
Zobacz ten jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>
<!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>
Można użyć CSSPIE o zaokrąglonych orners dla IE
Po przyjrzeniu się odpowiedzi broofy, powiedziałbym, że użycie klasy dla zawisu zamiast identyfikatora ma dużo więcej sensu. –
Zdecydowanie wymaga dwóch lub trzech div, chyba że używasz obraz tła
Oto trzy -div rozwiązanie
http://jsfiddle.net/pxfunc/SUuF6/
Jest kompatybilny z różnymi przeglądarkami. Zawieszanie nie będzie działać w IE6, ale będzie w IE7 +. Zaokrąglone narożniki będą wyświetlane na podstawie wsparcia przeglądarki
HTML:
<div id="fancyShape">
<div id="main"><div></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;}
jedno rozwiązanie div wykorzystujące elementy pseudo:
/* 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>
1 div no. 2 divs tak. –
Czy potrzebujesz go do rozmiaru z zawartością? – ErikE
Możesz zrobić większość tego, czego szukasz, co ilustruje moja odpowiedź poniżej. Głównym ograniczeniem, jak zauważyli inni, będzie możliwość przesyłania tekstu w regionie, który narysowaliście. Dostępne są również rozwiązania wykorzystujące obraz tła SVG lub nakładające przezroczysty element div na element