figura geométricas com html e css CÓDIGO FONT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>figuras geometricas</title>
<style>
div#triangulo{
width: 0;
height: 0;
margin: auto;
border-left: 100px solid transparent;
border-right:100px solid transparent;
border-bottom:200px solid red;
margin-left:25% ;
position: absolute;
}
div#quadrado{
width: 200px;
height: 200px;
margin: auto;
margin-left:2% ;
position: absolute;
border:2px solid black;
background-color: blue;
}
div#circulo{
width: 200px;
height: 200px;
margin: auto;
margin-left:45% ;
position: absolute;
border:2px solid blue;
background-color: green;
border-radius: 50%;
}
div#figura4{
width: 200px;
height: 200px;
margin: auto;
margin-left:70% ;
position: absolute;
border:2px solid black;
background-color: rgb(132, 0, 255);
border-radius: 0 50% 50% 0;
}
div#figura5{
width: 200px;
height: 200px;
margin: auto;
margin:23% 2% ;
position: absolute;
border:2px solid black;
background-color: #02033b;
border-radius: 50% 50% 0 0;
}
div#figura6{
width: 0;
height: 0;
margin: auto;
margin:23% 5% ;
position: absolute;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
border-left: 200px solid transparent;
border-right: 200px solid rgb(95, 62, 0);
}
div#figura7{
width: 0;
height: 0;
margin: auto;
margin:23% 50% ;
position: absolute;
border-top: 200px solid #af0098;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
div#figura8{
width: 30px;
height: 205px;
margin: auto;
margin:23% 74% ;
position: absolute;
background-color: #02033b;
transform: rotateZ(-30deg);
}
div#figura9{
width: 30px;
height: 205px;
margin: auto;
margin:23% 89% ;
position: absolute;
background-color: #02033b;
transform: rotateZ(30deg);
}
</style>
</head>
<body>
<div id="quadrado"></div>
<div id="triangulo"></div>
<div id="circulo" ></div>
<div id="figura4" ></div>
<div id="figura5" ></div>
<div id="figura6" ></div>
<div id="figura7" ></div>
<div id="figura8" ></div>
<div id="figura9" ></div>
</body>
</html>
1 Comentários
Muito bom
ResponderExcluir