Mai multe
triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.
Triunghi in sus
Cod:
<style type="text/css">
#triangleup {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
<div id="triangleup"><br/><br/><br/>>Sus</div>
Rezultat:
Triunghi in jos
Cod:
<style type="text/css">
#triangledown {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
/* Continut in triunghi */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>
<div id="triangledown"><div>JOS</div></div>
Rezultat:
Triunghi stanga
Cod:
<style type="text/css">
#triangleleft {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid blue;
}
/* Continut in triunghi */
#triangleleft div{ margin:-10px 0 0 25px; }
</style>
<div id="triangleleft"><div>Stanga</div></div>
Rezultat:
Triunghi dreapta
Cod:
<style type="text/css">
#triangleright {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid blue;
}
/* Continut in triunghi */
#triangleright div{ margin:-10px 0 0 -85px; }
</style>
<div id="triangleright"><div>Dreapta</div></div>
Rezultat:
Triunghi stanga-sus
Cod:
<style type="text/css">
#triangletopleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="triangletopleft">...</div>
Rezultat:
Triunghi dreapta-sus
Cod:
<style type="text/css">
#triangletopright {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="triangletopright">...</div>
Rezultat:
Triunghi jos-stanga
Cod:
<style type="text/css">
#trianglebottomleft {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 50px solid transparent;
}
</style>
<div id="trianglebottomleft">...</div>
Rezultat:
Triunghi jos-dreapta
Cod:
<style type="text/css">
#trianglebottomright {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
}
</style>
<div id="trianglebottomright">...</div>
Rezultat:
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag este element de tip bloc?
<div> <img> <span><div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;h2 {
text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food; // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't playedThe child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contabaÉl no habrá contado el cuento.
- El nu ar fi spus povestea.