0

introducir la descripción de la imagen aquí

Estoy intentando maquetar este diseño, en donde la sección F tenga un background con un linear gradient

he intentado esto

#f{
    background-color: #113B67;
    color: #E7EBF0;

    background: rgb(255,255,255);
    background:
    linear-gradient(45deg, #E7EBF0 32%, rgba(17,59,103,1) 32%, rgba(17,59,96,1) 64%,#E7EBF0 64%),
    linear-gradient(138deg, #E7EBF0 32%, rgba(17,59,103,1) 32%, rgba(17,59,96,1) 64%,#E7EBF0 64%);

    
  }

pero el resultado es el siguiente:

introducir la descripción de la imagen aquí

La idea es que el color azul quede como una flecha apuntando hacia arriba Hay alguna forma de poder hacer esto con CSS?

1 respuesta 1

0

Puedes intentar algo como esto. Separando un div para crear el triángulo de la flecha y otro con el contenido.

body {
  margin:0px;
}
.content {
  background:#40639B;
  width:60%;
  padding:7% 20% 10% 20%;
  color:#fff;
}

.arrow-up{
  height:100px;
}
.arrow-up:before {
  content: "";
  position:absolute;
  left:0px;
  width:50%;
  height:100px;
  background: linear-gradient(to right bottom, #fff 49%, #40639B 50%);
}
.arrow-up:after {
  content: "";
  position:absolute;
  right:0px;
  width:50%;
  height:100px;
  background: linear-gradient(to left bottom, #fff 49%, #40639B 50%);
}
<div class="arrow-up"></div>
<div class="content">
  <p>Contenido de la sección</p>
</div>

3
  • Pero el contendio de la sección quedaría en uno de los dos div, no? el 5 dic. 2020 a las 21:07
  • 1
    Claro en el que he puesto el texto. Quedaría un div con el contenido y encima un div con forma de triángulo para hacer el efecto de flecha hacia arriba. el 5 dic. 2020 a las 21:08
  • Eres un crack! gracias por la explicación, lo estoy aplicando el 5 dic. 2020 a las 21:11

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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