Dibujar una forma trapezoidal con CSS![gráfica de visualizaciones gráfica de visualizaciones](/img/img.png?11.51)
CSS
Publicado el 20 de Septiembre del 2020 por Katas (47 códigos)
1.538 visualizaciones desde el 20 de Septiembre del 2020
Ejemplo de como dibujar una forma trapezoidal con CSS
![forma-trapezoidal-en-CSS](/usr/351000/351170/5f671a8a20e2b-forma-trapezoidal-en-CSS.png)
![forma-trapezoidal-en-CSS](/usr/351000/351170/5f671a8a20e2b-forma-trapezoidal-en-CSS.png)
<style>
#trapezoidal1 {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
#trapezoidal2 {
border-left: 100px solid red;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
width: 0;
height: 100px;
}
#trapezoidal3 {
border-top: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
#trapezoidal4 {
border-right: 100px solid red;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
width: 0;
height: 100px;
}
div {margin-bottom:20px;}
</style>
<div id="trapezoidal1"></div>
<div id="trapezoidal2"></div>
<div id="trapezoidal3"></div>
<div id="trapezoidal4"></div>
Comentarios sobre la versión: 1 (0)
No hay comentarios