necesito para dar forma a UNOdiv etiqueta de la siguiente forma:¿Es posible tener un div no rectangular?
¿Es posible hacer que el navegador cruz? No necesariamente necesito esquinas redondeadas. Lo necesito así que puedo cambiar el color de los bordes de div en vuelo estacionario, por lo que supongo que no se puede lograr utilizando dos div s.
Puede usar un mapa o usar 2 divs y modificar los bordes para que se vea como una forma.
dos opciones que se me ocurren:
1) dan el div imagen de fondo y utilizar pseudo clase CSS: ciernen a cambiar la imagen de fondo a uno que indica un estado estacionario
2) put tres div dentro de una envoltura, y colóquelos de modo que tenga uno en la esquina superior izquierda, y luego dos apilados uno encima del otro, para que pueda simular la mitad superior de una div más grande que falta el medio borde superior izquierdo. No creo que CSS pueda atacar todos los divs para cambiar sus fronteras, por lo que probablemente tenga que usar JS para ejecutar el comportamiento de vuelo flotante, al aplicar un controlador de eventos a los tres divs.
Me gustaría ir con el # 1 aquí - es probablemente la solución más directa para esto. Alternativamente, probablemente podría usar una forma SVG, pero eso probablemente sea un poco más complejo (además no funcionará en navegadores más antiguos, etc.) –
en cuanto al n. ° 2, otros proporcionaron una solución de 2 div que también funcionaría. – thescientist
Re: # 1, El uso de imágenes de fondo es _fail_. Es muy difícil aplicar diferentes colores, requiere cargar recursos adicionales para la página ... en general, es una mala idea. Re # 2, la respuesta es simplemente incorrecta. : coloque el cursor sobre las obras DIV externas (consulte el ejemplo de jsfiddle en mi respuesta) – broofa
Quizás podría usar Border-radius junto con 2 o 3 div para obtener el aspecto que desea. El único problema es que no es compatible con todos los navegadores.
Sí, se puede hacer que el uso de HTML y CSS de esta manera: http://jsfiddle.net/broofa/364Eq/
Básicamente se trata de usar tres divs para agregar los eventos de ratón, así:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
Y utilizo una: la regla de la libración en el elemento exterior a afectar a los colores de los bordes de los divs interiores:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
la única peculiaridad con este margen de beneficio es que el área de contenido - el área que dibujó en su imagen - es que son dos divs, no uno. Por lo tanto, el texto no se ajustará y fluirá de la manera que usted podría esperar. Además, esto puede no funcionar tan bien en navegadores más antiguos (IE6-7). Pero FF, Chrome, Safari, Opera probablemente deberían estar bien.
No. Las divisiones son SIEMPRE rectangulares. Podrías falsificarlo de varias maneras (usar una imagen de fondo sería una opción).
En cuanto a usar dos DIV, seguro que podría. El vuelo estacionario se puede hacer con CSS3 y los selectores secundarios de un div principal o puede usar JavaScript para cambiar la clase de ambos divs al pasar el cursor sobre cualquiera de ellos.
Use varios divs, como otros han sugerido.
http://jsfiddle.net/thomas4g/7B5MA/14/
Tenga en cuenta que va a ser muy duro para fluir contenido de este.
ver este 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>
Usted puede utilizar CSSPIE para orners redondeadas para IE
Después de mirar la respuesta de Broofa, diría que usar la clase para el vuelo estacionario en lugar de las ID tiene mucho más sentido. –
Definitivamente se necesitan dos o tres divs a menos que utilice una imagen de fondo
Aquí hay tres -div solution
http://jsfiddle.net/pxfunc/SUuF6/
Es compatible con varios navegadores. El vuelo estacionario no funcionará en IE6, pero lo hará en IE7 +. Las esquinas redondeadas se muestran sobre la base de soporte de los navegadores
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;}
una solución de un div usando pseudo elementos:
/* 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 sí. –
¿Lo necesita para clasificar con su contenido? – ErikE
Puede hacer la mayor parte de lo que busca, como se ilustra en mi respuesta a continuación. La principal limitación, como han señalado otros, será la capacidad de hacer circular texto en la región que ha dibujado. También hay soluciones que implican una imagen de fondo SVG, o superposición de un elemento transparente en la parte superior de un elemento