码农教程 - 一技在手,衣食无忧!
Home
HTML/CSS
HTML
CSS
W3.CSS
Bootstrap
SASS
Bootstrap4
Bootstrap5
JavaScript
JavaScript
React
jQuery
Nodejs
VUE
TypeScript
Angular
Server
JAVA
PHP
C
C++
GO
Django
DB
SQL
MYSQL
PostgreSql
MongoDb
Data Analysis
Python
R
Mobile
Kotlin
XML
XML
ASP.NET
C#
ASP
Dev Tools
GIT
Website
How To
AWS
Cybersecurity
AI
AI
Gen AI
Data Science
目录
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
Image Gallery
Scrollable Image Gallery
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
Nested 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
Color Picker
Email Field
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
Ribbon
Tag Cloud
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
Change Class
Active Class
Tree View
Remove Decimals
Remove Property
Offline Detection
Find Hidden Element
Redirect Webpage
Format a Number
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
Text Divider
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
JS Random Number
JS Sort Numeric Array
JS Spread Operator
JS Scroll Into View
Get Current Date
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 ❯
纠错反馈
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!
标注
直接在页面拖动鼠标来标注反馈区域!
下一步
反馈内容
联系方式(邮箱)
返回
提交