Tutorials
References
Exercises
Videos
Menu
Log in
Create Website
Get Certified
Upgrade
HTML
CSS
JAVASCRIPT
SQL
PYTHON
JAVA
PHP
BOOTSTRAP
HOW TO
W3.CSS
C
C++
C#
REACT
R
JQUERY
DJANGO
TYPESCRIPT
NODEJS
MYSQL
Dark mode
Dark code
×
Tutorials
HTML and CSS
Learn HTML
Learn CSS
Learn RWD
Learn Bootstrap
Learn W3.CSS
Learn Colors
Learn Icons
Learn Graphics
Learn SVG
Learn Canvas
Learn How To
Learn Sass
Data Analytics
Learn AI
Learn Machine Learning
Learn Data Science
Learn NumPy
Learn Pandas
Learn SciPy
Learn Matplotlib
Learn Statistics
Learn Excel
XML Tutorials
Learn XML
Learn XML AJAX
Learn XML DOM
Learn XML DTD
Learn XML Schema
Learn XSLT
Learn XPath
Learn XQuery
JavaScript
Learn JavaScript
Learn jQuery
Learn React
Learn AngularJS
Learn JSON
Learn AJAX
Learn AppML
Learn W3.JS
Programming
Learn Python
Learn Java
Learn C
Learn C++
Learn C#
Learn R
Learn Kotlin
Learn Go
Learn Django
Learn TypeScript
Server Side
Learn SQL
Learn MySQL
Learn PHP
Learn ASP
Learn Node.js
Learn Raspberry Pi
Learn Git
Learn MongoDB
Learn AWS Cloud
Web Building
Create a Website
NEW
Where To Start
Web Templates
Web Statistics
Web Certificates
Web Development
Code Editor
Test Your Typing Speed
Play a Code Game
Cyber Security
Accessibility
Join our Newsletter
Data Analytics
Learn AI
Learn Machine Learning
Learn Data Science
Learn NumPy
Learn Pandas
Learn SciPy
Learn Matplotlib
Learn Statistics
Learn Excel
Learn Google Sheets
XML Tutorials
Learn XML
Learn XML AJAX
Learn XML DOM
Learn XML DTD
Learn XML Schema
Learn XSLT
Learn XPath
Learn XQuery
×
References
HTML
HTML Tag Reference
HTML Browser Support
HTML Event Reference
HTML Color Reference
HTML Attribute Reference
HTML Canvas Reference
HTML SVG Reference
Google Maps Reference
CSS
CSS Reference
CSS Browser Support
CSS Selector Reference
Bootstrap 3 Reference
Bootstrap 4 Reference
W3.CSS Reference
Icon Reference
Sass Reference
JavaScript
JavaScript Reference
HTML DOM Reference
jQuery Reference
AngularJS Reference
AppML Reference
W3.JS Reference
Programming
Python Reference
Java Reference
Server Side
SQL Reference
MySQL Reference
PHP Reference
ASP Reference
XML
XML DOM Reference
XML Http Reference
XSLT Reference
XML Schema Reference
Character Sets
HTML Character Sets
HTML ASCII
HTML ANSI
HTML Windows-1252
HTML ISO-8859-1
HTML Symbols
HTML UTF-8
×
Exercises and Quizzes
Exercises
HTML Exercises
CSS Exercises
JavaScript Exercises
Python Exercises
SQL Exercises
PHP Exercises
Java Exercises
C Exercises
C++ Exercises
C# Exercises
jQuery Exercises
React.js Exercises
MySQL Exercises
Bootstrap 5 Exercises
Bootstrap 4 Exercises
Bootstrap 3 Exercises
NumPy Exercises
Pandas Exercises
SciPy Exercises
TypeScript Exercises
Excel Exercises
R Exercises
Git Exercises
Kotlin Exercises
Go Exercises
MongoDB Exercises
Quizzes
HTML Quiz
CSS Quiz
JavaScript Quiz
Python Quiz
SQL Quiz
PHP Quiz
Java Quiz
C Quiz
C++ Quiz
C# Quiz
jQuery Quiz
React.js Quiz
MySQL Quiz
Bootstrap 5 Quiz
Bootstrap 4 Quiz
Bootstrap 3 Quiz
NumPy Quiz
Pandas Quiz
SciPy Quiz
TypeScript Quiz
XML Quiz
R Quiz
Git Quiz
Kotlin Quiz
Cyber Security Quiz
Accessibility Quiz
Courses
HTML Course
CSS Course
JavaScript Course
Front End Course
Python Course
SQL Course
PHP Course
Java Course
C++ Course
C# Course
jQuery Course
React.js Course
Bootstrap 4 Course
Bootstrap 3 Course
NumPy Course
Pandas Course
TypeScript Course
XML Course
R Course
Data Analytics Course
Cyber Security Course
Accessibility Course
Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
Python Certificate
SQL Certificate
PHP Certificate
Java Certificate
C++ Certificate
C# Certificate
jQuery Certificate
React.js Certificate
MySQL Certificate
Bootstrap 5 Certificate
Bootstrap 4 Certificate
Bootstrap 3 Certificate
TypeScript Certificate
XML Certificate
Excel Certificate
Data Science Certificate
Cyber Security Certificate
Accessibility Certificate
×
Tutorials
References
Exercises
Get Certified
Upgrade
Spaces
Videos
Shop
HOW TO
HowTo Home
Menus
Icon Bar
Menu Icon
Accordion
Tabs
Vertical Tabs
Tab Headers
Full Page Tabs
Hover Tabs
Top Navigation
Responsive Topnav
Split Navigation
Navbar with Icons
Search Menu
Search Bar
Fixed Sidebar
Side Navigation
Responsive Sidebar
Fullscreen Navigation
Off-Canvas Menu
Hover Sidenav Buttons
Sidebar with Icons
Horizontal Scroll Menu
Vertical Menu
Bottom Navigation
Responsive Bottom Nav
Bottom Border Nav Links
Right Aligned Menu Links
Centered Menu Link
Equal Width Menu Links
Fixed Menu
Slide Down Bar on Scroll
Hide Navbar on Scroll
Shrink Navbar on Scroll
Sticky Navbar
Navbar on Image
Hover Dropdowns
Click Dropdowns
Cascading Dropdown
Dropdown in Topnav
Dropdown in Sidenav
Resp Navbar Dropdown
Subnavigation Menu
Dropup
Mega Menu
Mobile Menu
Curtain Menu
Collapsed Sidebar
Collapsed Sidepanel
Pagination
Breadcrumbs
Button Group
Vertical Button Group
Sticky Social Bar
Pill Navigation
Responsive Header
Images
Slideshow
Slideshow Gallery
Modal Images
Lightbox
Responsive Image Grid
Image Grid
Tab Gallery
Image Overlay Fade
Image Overlay Slide
Image Overlay Zoom
Image Overlay Title
Image Overlay Icon
Image Effects
Black and White Image
Image Text
Image Text Blocks
Transparent Image Text
Full Page Image
Form on Image
Hero Image
Blur Background Image
Change Bg on Scroll
Side-by-Side Images
Rounded Images
Avatar Images
Responsive Images
Center Images
Thumbnails
Border Around Image
Meet the Team
Sticky Image
Flip an Image
Shake an Image
Portfolio Gallery
Portfolio with Filtering
Image Zoom
Image Magnifier Glass
Image Comparison Slider
Favicon
Buttons
Alert Buttons
Outline Buttons
Split Buttons
Animated Buttons
Fading Buttons
Button on Image
Social Media Buttons
Read More Read Less
Loading Buttons
Download Buttons
Pill Buttons
Notification Button
Icon Buttons
Next/prev Buttons
More Button in Nav
Block Buttons
Text Buttons
Round Buttons
Scroll To Top Button
Forms
Login Form
Signup Form
Checkout Form
Contact Form
Social Login Form
Register Form
Form with Icons
Newsletter
Stacked Form
Responsive Form
Popup Form
Inline Form
Clear Input Field
Hide Number Arrows
Copy Text to Clipboard
Animated Search
Search Button
Fullscreen Search
Input Field in Navbar
Login Form in Navbar
Custom Checkbox/Radio
Custom Select
Toggle Switch
Check Checkbox
Detect Caps Lock
Trigger Button on Enter
Password Validation
Toggle Password Visibility
Multiple Step Form
Autocomplete
Turn off autocomplete
Turn off spellcheck
File Upload Button
Empty Input Validation
Filters
Filter List
Filter Table
Filter Elements
Filter Dropdown
Sort List
Sort Table
Tables
Zebra Striped Table
Center Tables
Full-width Table
Side-by-side Tables
Responsive Tables
Comparison Table
More
Fullscreen Video
Modal Boxes
Delete Modal
Timeline
Scroll Indicator
Progress Bars
Skill Bar
Range Sliders
Tooltips
Display Element Hover
Popups
Collapsible
Calendar
HTML Includes
To Do List
Loaders
Badges
Star Rating
User Rating
Overlay Effect
Contact Chips
Cards
Flip Card
Profile Card
Product Card
Alerts
Callout
Notes
Labels
Circles
Style HR
Coupon
List Group
List Group with Badges
List Without Bullets
Responsive Text
Cutout Text
Glowing Text
Fixed Footer
Sticky Element
Equal Height
Clearfix
Responsive Floats
Snackbar
Fullscreen Window
Scroll Drawing
Smooth Scroll
Gradient Bg Scroll
Sticky Header
Shrink Header on Scroll
Pricing Table
Parallax
Aspect Ratio
Responsive Iframes
Toggle Like/Dislike
Toggle Hide/Show
Toggle Dark Mode
Toggle Text
Toggle Class
Add Class
Remove Class
Active Class
Tree View
Remove Property
Offline Detection
Find Hidden Element
Redirect Webpage
Zoom Hover
Flip Box
Center Vertically
Center Button in DIV
Center a List
Transition on Hover
Arrows
Shapes
Download Link
Full Height Element
Browser Window
Custom Scrollbar
Hide Scrollbar
Show/Force Scrollbar
Device Look
Contenteditable Border
Placeholder Color
Disable Resizing of Textarea
Disable Text Selection
Text Selection Color
Bullet Color
Vertical Line
Dividers
Animate Icons
Countdown Timer
Typewriter
Coming Soon Page
Chat Messages
Popup Chat Window
Split Screen
Testimonials
Section Counter
Quotes Slideshow
Closable List Items
Typical Device Breakpoints
Draggable HTML Element
JS Media Queries
Syntax Highlighter
JS Animations
JS String Length
JS Exponentiation
JS Default Parameters
Get Current URL
Get Current Screen Size
Get Iframe Elements
Website
Create a Free Website
Make a Website
Make a Static Website
Host a Static Website
Make a Website (W3.CSS)
Make a Website (BS3)
Make a Website (BS4)
Make a Website (BS5)
Create and View a Website
Create a Link Tree Website
Create a Portfolio
Create a Resume
Make a Restaurant Website
Make a Business Website
Make a WebBook
Center Website
Contact Section
About Page
Big Header
Example Website
Grid
2 Column Layout
3 Column Layout
4 Column Layout
Expanding Grid
List Grid View
Mixed Column Layout
Column Cards
Zig Zag Layout
Blog Layout
Google
Google Charts
Google Fonts
Google Font Pairings
Google Set up Analytics
Converters
Convert Weight
Convert Temperature
Convert Length
Convert Speed
Blog
Get a Developer Job
Become a Front-End Dev.
How TO - CSS Shapes
❮ Previous
Next ❯
Learn how to create different shapes with CSS.
Square
Try it Yourself »
Circle
Try it Yourself »
Oval
Try it Yourself »
Trapezoid
Try it Yourself »
Rectangle
Try it Yourself »
Parallelogram
Try it Yourself »
Triangle Up
Try it Yourself »
Triangle Down
Try it Yourself »
Triangle Left
Try it Yourself »
Triangle Right
Try it Yourself »
❮ Previous
Next ❯
COLOR PICKER
Get certified
by completing
a
course today!
w
3
s
c
h
o
o
l
s
C
E
R
T
I
F
I
E
D
.
2
0
2
2
Get started