Tạo bài viết
Đăng ký
04/10/2018, 20:03

CSS3 Shapes : Tổng hợp những hình dạng được làm từ CSS3

Hôm nay mình sẽ chia sẻ cho các bạn những đoạn css giúp các bạn tạo nên những hình vuông, hình tròn, hình tam giác… và qua bài viết này, chắc chắn một điều là các bạn sẽ nâng cao kinh nghiệm cũng như trình độ về CSS3 của bạn nên đáng kể. Square #square { awidth: 140px; ...

Hôm nay mình sẽ chia sẻ cho các bạn những đoạn css giúp các bạn tạo nên những hình vuông, hình tròn, hình tam giác… và qua bài viết này, chắc chắn một điều là các bạn sẽ nâng cao kinh nghiệm cũng như trình độ về CSS3 của bạn nên đáng kể.

Square

css3-shapes-01

#square {
   awidth: 140px;
   height: 140px;
   background: blue;
}

Circle

css3-shapes-02

#circle {
   awidth: 140px;
   height: 140px;
   background: blue;
   -moz-border-radius: 70px;
   -webkit-border-radius: 70px;
   border-radius: 70px;
}

Oval

css3-shapes-03

#oval {
   awidth: 200px;
   height: 100px;
   background: blue;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;
}

Up Triangle

css3-shapes-04

#up-triangle {
   awidth: 0;
   height: 0;
   border-bottom: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Down Triangle

css3-shapes-05

#down-triangle {
   awidth: 0;
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Left Triangle

css3-shapes-06

#left-triangle {
   awidth: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Right Triangle

css3-shapes-07

#right-triangle {
   awidth: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}

Triangle Top Left

css3-shapes-08

#triangle-topleft {
   awidth: 0;
   height: 0;
   border-top: 100px solid blue;
   border-right: 100px solid transparent;
}

Triangle Top Right

css3-shapes-09

#triangle-topright {
   awidth: 0;
   height: 0;
   border-top: 100px solid blue;
   border-left: 100px solid transparent;
}

Triangle Bottom Left

css3-shapes-10

#triangle-bottomleft {
   awidth: 0;
   height: 0;
   border-bottom: 100px solid blue;
   border-right: 100px solid transparent;
}

Triangle Bottom Right

css3-shapes-11

#triangle-bottomright {
   awidth: 0;
   height: 0;
   border-bottom: 100px solid blue;
   border-left: 100px solid transparent;
}

Trapezium

CSS3 Shapes : Tổng hợp những hình dạng được làm từ CSS3

#trapezium {
   height: 0;
   awidth: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

Diamond

css3-shapes-13

#diamond {
   awidth: 80px;
   height: 80px;
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

Rectangle

css3-shapes-14

#rectangle {
   awidth: 140px;
   height: 80px;
   background: blue;
}

Parallelogram

css3-shapes-15

#parallelogram {
   awidth: 130px;
   height: 75px;
   background: blue;
   /* Skew */
   -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Twelve Point Star

css3-shapes-16

#twelve-point-star {
   height: 100px;
   awidth: 100px;
   background: blue;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   awidth: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   awidth: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

Six Point Star

css3-shapes-17

#six-point-star {
   position: absolute;
   awidth: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 80px solid blue;
}
#six-point-star:after {
   content:"";
   position: absolute;
   awidth: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 80px solid blue;
   margin: 30px 0 0 -50px;
}

Octagon

css3-shapes-18

#octagon {
   awidth: 100px;
   height: 100px;
   background: blue;
}
#octagon:before {
   height: 0;
   awidth: 40px;
   content:"";
   position: absolute;
   border-bottom: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
}
#octagon:after {
   height: 0;
   awidth: 40px;
   content:"";
   position: absolute;
   border-top: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
   margin: 70px 0 0 0;
}

Speech Bubble

css3-shapes-19

#speech-bubble {
   awidth: 120px;
   height: 80px;
   background: blue;
   position: absolute;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   awidth: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

Egg

css3-shapes-20

#egg {
   display:block;
   awidth:126px;
/* awidth has to be 70% of height */
/* could use awidth:70%; in a square container */
   height:180px;
   background-color:blue;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

EQ Triangle

css3-shapes-21

#eq-triangle {
  awidth: 0;
  height: 0;
  border-bottom: 104px solid blue;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

Pacman

css3-shapes-22

#pacman {
  awidth: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid blue;
  border-left: 60px solid blue;
  border-bottom: 60px solid blue;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Biohazard

css3-shapes-23

#biohazard {
  awidth: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
}

Heart

css3-shapes-24

#heart {
	position: relative;
}
#heart:before, #heart:after {
   position: absolute;
   content: "";
   left: 70px; top: 0;
   awidth: 70px;
   height: 115px;
   background: blue;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
#heart:after {
left: 0;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -o-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}

Infinity

css3-shapes-25

#infinity {
   position: relative;
   awidth: 164px;
   height: 80px;
}
#infinity:before, #infinity:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   awidth: 40px;
   height: 40px;
   border: 20px solid blue;
   -moz-border-radius: 50px 50px 0 50px;
   border-radius: 50px 50px 0 50px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}
#infinity:after {
   left: auto;
   right: 0;
   -moz-border-radius: 50px 50px 50px 0;
   border-radius: 50px 50px 50px 0;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg); y
   transform: rotate(45deg);
}

Mình hy vọng là với những hình trên, sẽ tiết kiệm cho các bạn rất nhiều thời gian cũng như hiểu rõ hơn về các thuộc tính mới của CSS3. Có thể nhiều hình sẽ không hiển thị đúng như trong hình (do nhiều trình duyệt chưa hỗ trợ) nên các bạn nên test thử trên các phiên bản trình duyệt mới nhất của Firefox hay Chrome để có hiệu quả tốt nhất nhé.

Tags: css3 CSS3 Shapes

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024