Figuras con css (similar a trapecio)

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

2019/04/11 a las 10:03

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.

Juan Carlos Cruz de los santosStaff

2019/04/11 a las 10:24

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 :)

Necesitas iniciar sesión para responder.

Roly ...

2019/04/11 a las 11:16

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.