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 can be used to create input text field in web page?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Which CSS property displays the text in a small-caps font?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
What instruction displays a notice box with a message inside it, in JavaScript?
for() Date() alert()
var msg = "Visit CoursesWeb.net";
alert(msg);
Indicate the PHP code used to get the users IP.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
CSS Trapezoid Shape

Last accessed pages

  1. Add Text in Canvas from Input text field, as it is Typed (6765)
  2. Get Mouse coordinates inside a Div or an Image (11402)
  3. Convert JSON in JavaScript (5777)
  4. Register and show online users and visitors (31583)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (47918)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2975)
  2. Contact page - CoursesWeb (2866)
  3. Tabs effect with CSS (2848)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1039)
  5. PHP getElementById and getElementsByTagName (998)