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

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>
Necesitas iniciar sesión para responder.Necesitas iniciar sesión para responder.
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.
Necesitas iniciar sesión para responder.