The Shapes of CSS ทำได้ขนาดนี้เชียว

by Little Bear @13 เม.ย. 55 03:01 ( IP : 122...54 ) | Tags : CSS

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

Square

 #square {
    width: 100px;
    height: 100px;
    background: red;
}

Rectangle




 #rectangle {
width: 200px;
height: 100px;
background: red;

Circle

circle {

width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

/* Cleaner, but slightly less support: use "50%" as value */

Oval




Triangle Up

Triangle Down

Triangle Left

Triangle Right




Triangle Top Left

Triangle Top Right

Triangle Bottom Left

Triangle Bottom Right

Curved Tail Arrow via Ando Razafimandimby

Trapezoid

Parallelogram

Trapezoid

Star (6-points)

Star (5-points) via Kit MacAllister

Pentagon

Hexagon

Octagon

Diamond Square via Joseph Silber

Diamond Shield via Joseph Silber

Diamond Narrow via Joseph Silber

Cut Diamond via Alexander Futekov

Egg

Pac-Man

Talk Bubble

12 Point Burst via Alan Johnson

8 Point Burst via Alan Johnson

Badge Ribbon via Catalin Rosu

แบบอื่น ๆ







แสดงความคิดเห็น

« 2137
หากท่านไม่ได้เป็นสมาชิก ท่านจำเป็นต้องป้อนตัวอักษรของ Anti-spam word ในช่องข้างบนให้ถูกต้อง
The content of this field is kept private and will not be shown publicly. This mail use for contact via email when someone want to contact you.
Bold Italic Underline Left Center Right Ordered List Bulleted List Horizontal Rule Page break Hyperlink Text Color :) Quote
คำแนะนำ เว็บไซท์นี้สามารถเขียนข้อความในรูปแบบ มาร์คดาวน์ - Markdown Syntax:
  • วิธีการขึ้นบรรทัดใหม่โดยไม่เว้นช่องว่างระหว่างบรรทัด ให้เคาะเว้นวรรค (Space bar) ที่ท้ายบรรทัดจำนวนหนึ่งครั้ง
  • วิธีการขึ้นย่อหน้าใหม่ซึ่งจะมีการเว้นช่องว่างห่างจากบรรทัดด้านบนเล็กน้อย ให้เคาะ Enter จำนวน 2 ครั้ง