CSS para curva de pendiente esquina de un DIV

Question

CSS para curva de pendiente esquina de un DIV

Cómo lograr esto <div> desde CSS:

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;
}

No soy capaz de modificar la sección de pendiente y rellenar blanco en el interior.

34

css css3

Author: Qtax, 2013-04-19

Source

4 answers

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

Esto es lo que he usado: introduzca la descripción de la imagen aquí

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

LE: Parece que también se muestra 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;
}

9

Author: Cristy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-19 10:55:20

Usted podría hacer esto con css, pero es un montón de jugueteo (=posibles problemas de crossbrowser). Configuré un violín sobre cómo hacerlo con CSS. Sin embargo, uno puede ver algunas perturbaciones dentro de la frontera (especialmente al hacer zoom). Sin embargo, es solo un boceto y podría optimizarse, por supuesto.

La solución mejor y más confiable para crossbrowser sería usar una imagen de fondo en la posición marcada a continuación. Puedes usar un pseudoelemento para eso si quieres a.

introduzca la descripción de la imagen aquí

Básicamente construyo la pendiente con dos pseudo elementos girados y sesgados. Esta solución es superior a las que usan solo border-radius (que creo que es muy subóptima porque los navegadores renderizan las esquinas redondeadas de manera bastante diferente), pero necesita 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;
}

8

Author: Christoph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-19 12:32:18

Tal vez este código? jsFiddle, no estoy seguro de que quieras, 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;
}

4

Author: mehdi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-19 12:46:25

score 16 · Accepted Answer

Mi intento, como se publicó en 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;
}

Ampliado de cerca, la esquina izquierda no encaja, y las dos semicurvas en realidad se curvan una detrás de la otra, pero nada de eso es visible en el zoom normal. Esto puede ser un problema para los teléfonos y las pantallas de alta resolución que pueden mostrar el contenido ampliado, o más exactamente en el zoom normal.