33 votos

CSS para la pendiente curverd esquina de un DIV

cómo lograr este <div> de CSS:

enter image description here

Mi Intento:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid white;
    border-right: 80px solid red;
    width: 0;
}

Yo no soy capaz de modificar la pendiente de la sección y de relleno blanco en el interior.

16voto

Gareth Cornish Puntos 2945

Mi intento, como el publicado en los comentarios (http://jsfiddle.net/8Zm96/):

div{
    width: 300px;
    height: 280px;
    background: #fff;
    border: solid 1px red;
    border-width: 0 1px 1px 1px;
    border-radius: 4px;
    margin-top: 40px;
    position: relative;
}

div:before{
    content: '';
    position: absolute;
    top: -20px;
    right: -1px;
    border: solid 1px red;
    border-width: 1px 1px 0 0;
    border-radius: 25px 4px 0 0;
    height: 24px;
    width: 250px;
    background: #fff;
}

div:after{
    content: '';    
    position: absolute;
    top: -20px;
    left: 2px;
    border: solid 1px red;
    border-width: 0 0 1px 0;
    border-radius: 0 0 20px 0;
    height: 20px;
    width: 55px;
    background: #fff;
}

Zoom de cerca, en la esquina izquierda no encajan, y los dos semi-curvas en realidad la curva más allá de uno a otro, pero ninguno de los que es visible en condiciones normales de zoom. Esto puede ser un problema para los teléfonos y de alta resolución de las pantallas que puede mostrar el contenido de la imagen ampliada, o más exactamente en la normal de zoom.

9voto

Cristy Puntos 4026

Este es mi mejor probar: http://jsfiddle.net/2y7TB/2/

Aquí es lo que he utilizado: enter image description here

Sólo he probado en Chrome, si te gusta y quieres un cross-browser solución, por favor pregunte :)

LE: Parece que también se mostrará correctamente en las últimas versiones de Firefox y Opera.

.tab:before {
    content: '';
    position: absolute;
    top: -23px;
    right: -1px;
    border-right:1px solid orange;
    border-left:1px solid orange;
    border-top:1px solid orange;
    background:white;
    width: 247px;
    height:24px;
    border-top-right-radius:5px;
    border-top-left-radius:25px;
}

.tab:after {
    content: '';
    position: absolute;
    top: -9px;
    left:1px;
    border-right:1px solid orange;
    border-bottom:1px solid orange;
    border-top:none;
    background:white;
    width: 53px;
    height:9px;
    border-bottom-right-radius:180px;
    box-shadow:3px 3px 0px 3px white;
}

8voto

Christoph Puntos 23467

Usted puede hacer esto con css, pero es un montón de tocar el violín (=potencial de crossbrowser problemas). He creado un violín sobre cómo hacerlo con CSS. Sin embargo, uno puede ver algunos disturbios dentro de la frontera (especialmente cuando se utiliza el zoom). Es solo un boceto, y aunque podría ser optimizado de curso.

La mejor y crossbrowser fiable solución puede ser usar una imagen de fondo en la posición indicada a continuación. Usted puede utilizar un pseudoelement para que si lo desea.

enter image description here

Básicamente voy a construir en la ladera con dos rotar y sesgar pseudo elementos. Esta solución es superior a la de los que utilizan sólo border-radius (que creo que es muy subóptima debido a que los navegadores de procesamiento esquinas redondeadas de manera muy diferente), pero las necesidades de los navegadores compatibles debido a la transform.

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}

4voto

mehdi Puntos 1307

tal vez este código? jsFiddle , no estoy seguro de que usted quiere que, pero funciona en todos los Navegadores..

HTML:

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS:

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X