Css Course

Trapezoid shape with a DIV tag and CSS properties. The trapezoid shape is created by borders.
Code:
<style type="text/css">
#trapezoid {
 height: 0;
 width: 120px;
 border-bottom: 80px solid #05ed08;
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
}
</style>

<div id="trapezoid"><br/>CSS Course:<br/>
CoursesWeb.net</div>
Demo:

CSS Course:
CoursesWeb.net

Rectangular Trapezoid

Code:
<style type="text/css">
#rtrapezoid {
 height: 0;
 width: 120px;
 border-bottom: 100px solid #05ed08;
 border-left: 15px solid #05ed08;
 border-right: 45px solid transparent;
 padding-right: 20px;
}
</style>

<div id="rtrapezoid"><br/>CSS Course:<br/>
CoursesWeb.net</div>
Demo:

CSS Course:
CoursesWeb.net

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates input fields that should contain a numeric value?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Which CSS property allows to change the transparency of an element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Click on the function that formats a number to specified number of characters.
toPrecision() exp() toFixed()
var num = 12.34567;
alert( num.toPrecision(3) );       // 12.3
Which function randomizes the order of the elements into an array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
CSS Trapezoid Shape

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142972)
  2. Ajax click Tracking - Monitor clicks on html elements (2238)
  3. For and Foreach Loops (1866)
  4. $_GET, $_POST and $_REQUEST Variables (33900)
  5. Rectangle, Oval, Polygon - Star (3361)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (205)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (19)
  3. The Mastery of Love (19)
  4. CSS cursor property - Custom Cursors (18)
  5. Read Excel file data in PHP - PhpExcelReader (15)