0

Estoy intentando crear una portada con CSS como la que se muestra en la figura de abajo pero no logro hacer que los triangulos se vean redondeados

introducir la descripción de la imagen aquí

Esto es lo que llevo hasta ahorita, el div portada contiene la imagen de fondo.

.div-portada {
    background-image: url('../../../assets/strength-people-hands.jpg');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
}

.triangle-orange {
    width: 0;
    height: 0;
    border-left: 600px solid transparent;
    border-right: 600px solid transparent;
    border-top: 600px solid #ff8c12;
}

.triangle-white {
    position: relative;
    width: 100%;
    height: 500px;
}

.triangle-white:before {
    border-left: 500px solid #ffffff;
    border-top: 500px solid transparent;
    border-bottom: 500px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -130px;
    width: 0;
    top: -138px;
}
<div class="container-fluid div-portada" id="page1">
<div class="row mb-5">
   <div class="offset-3 col-9">
      <div class="triangle-orange"></div>
   </div>
</div>
<div class="row">
   <div class="col-8">
      <div class="triangle-white">
      </div>
   </div>
</div>

4
  • Por que triangle-orange no tiene dimensiones?
    – Christian
    el 25 mar. 2021 a las 22:33
  • Me parece haber visto una pregunta con la misma foto, bueno, una manera simple que creo que podría resultar es usar border-radius en los elementos para el redondeado, y como son rectangulos o cuadrados los giras con rotate y los ocultas la mirad con un top o right negativo para que parezca triangulo.
    – Ange Reyna
    el 25 mar. 2021 a las 22:44
  • Quizas te vendria bien hechar un vistazo a la etiqueta <SVG> el 25 mar. 2021 a las 23:58
  • @ArnauCastellví gracias por la recomendación si me sirve pero no puedo agregar svg necesito css el 29 mar. 2021 a las 16:19

1 respuesta 1

2

Al usar las propiedades border, no puedes redondearlas, entonces una solución es ver tu triangulo como un cuadrado o rectangulo inclinado. También podrías usar svg para dibujar ese tipo de figuras. Un ejemplo de lo primero mencionado sería así:

.container{
 position:relative;
 top:-70px;
 width:100%;
 display:flex;
 justify-content:center;
 
}
.triangle{
  width:100px;
  height:100px;
  background-color:orange;
  border-radius:10px;
  transform: rotate(-45deg);
}
<div class="container">
  <div class="triangle"></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.