Tengo el siguiente código:
#trapezoid { border-bottom: 150px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: 30px; } <div id='trapezoid'></div> Background:linear-gradient no funcionará ya que uso el borde para construir la forma.
¿Algún truco que pueda usar?
Gracias
PD: esto no es un duplicado de esta respuesta:
Puede crear un trapezoide usando el clip-path de CSS. De esa manera, puede establecer la imagen de fondo en un degradado lineal.
.trapezoid { width: 20vmin; height: 40vmin; clip-path: polygon(0 100%, 20% 0, 80% 0, 100% 100%); background-image: linear-gradient(red, blue); } <div class="trapezoid"></div>Aquí hay un trapezoide SVG que tiene un degradado lineal de fondo y también gira.
@keyframes rotating { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .shape { animation: rotating 2s linear infinite; } <svg viewBox="0 0 30 20" class="shape" style="width:300px"> <defs> <linearGradient id="grad" x2="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="black"/> </linearGradient> </defs> <polygon points="0, 0, 30, 0, 22, 20, 8, 20" fill="url(#grad)"/> </svg>