Figuras con css (similar a trapecio)

Avatar

Hola amigos una consulta como podría hacer estas figuras con css o mejor seria otra alternativa? Gracias

3respuestas
CSSFrontend
Avatar

Creo que lo puedes lograr de este modo, checa el código

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Figuras</title>
  <style>
    .trapecio{
          border-left: 45px solid transparent;
          border-bottom: 100px solid red;
          width: 100px;
    }
  </style>
</head>
<body>
<div class="trapecio"></div>
</body>
</html>
Avatar

Con la propiedad clip-path de CSS lo puedes hacer facil. Aqui te dejo algo que hice rapido: Ejemplo con clip-path

También hay un sitio donde puedes jugar con esta propiedad que es este: Clippy

Espero haberte ayudado :)

Avatar

Gracias amigos para acomodarlo de esa manera tendría que usar margin negativos? ya que la caja sigue siendo un cuadrado

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Django Desde Cero

Django Desde Cero

Crea aplicaciones web rápidas, escalables y seguras con Django, el framework Python que usa la Nasa.