0

Tengo que hacer un panel y en ciertas esquinas tengo que formar una tipo L como se muestra en la figura:

introducir la descripción de la imagen aquí

Tengo este código CSS:

.panel
{
    width: 80%;
    margin: 40px auto;
    background-color: #fff;
    border: 1px solid #ccc;
    background-image: linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD);           
    background-repeat: no-repeat;
    background-size: 10px 38%, 15% 10px, 10px 38%, 15% 10px, calc(100% - 8px) calc(100% - 8px);
    background-position: left bottom, left bottom, right top, right top, 4px 4px;
    padding: 10px;
    height: 400px;
}

Hasta el momento lo que tengo es que me forma la L correctamente pero la coloca dentro del panel y no como se ve en la imagen

2 respuestas 2

1

Yo lo que haría sería jugar con el :before y el :after del panel:

 .panel{
position: relative;
/*resto de codigo */
}

.panel::before,
.panel::after{
position: absolute;
width: 100px;
height: 100px;
background-color: #ff0000;
content: ' ';
}

panel::before{
bottom: -10px;
left: -10px;
}

panel::after{
top: -10px;
right: -10px;
}
1
  • Se me olvidó comentarte que juegues con los z-index de :before y :after para posicionarlo detrás del contenido del panel. Con esto consigues el efecto que quieres Commented el 29 may. 2019 a las 16:13
0

bueno podrias hacerlo agregando otro div dentro

ejemplo:

body{
    background-color: #00ffd9;
}
.panel{
    width: 80%;
    margin: 40px auto;
    /* background-color: #fff;*/
    border: 1px solid transparent;
    background-image: linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD),
                    linear-gradient(#4848CD, #4848CD);           
    background-repeat: no-repeat;
    background-size: 10px 38%, 15% 10px, 10px 38%, 15% 10px, calc(100% - 8px) calc(100% - 8px);
    background-position: left bottom, left bottom, right top, right top, 4px 4px;
   /*  padding: 10px; */
    height: 400px;
}


.inside{
    margin:10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background-color: #fff;
}
<div class="panel">
   <div class="inside"></div> 
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.