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 tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
CSS Trapezoid Shape

Last accessed pages

  1. Contact page - CoursesWeb (2155)
  2. Tabs effect with CSS (2867)
  3. Insert, Select and Update NULL value in MySQL (33021)
  4. Simple Admin Login PHP Script (1629)
  5. Convert XML to JSON in JavaScript (19155)

Popular pages this month

  1. Contact page - CoursesWeb (1641)
  2. Tabs effect with CSS (1627)
  3. Insert, Select and Update NULL value in MySQL (825)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)