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

01/05/2014

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 {
   width: 140px;
   height: 140px;
   background: blue;
}

Circle

css3-shapes-02

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

Oval

css3-shapes-03

#oval {
   width: 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 {
   width: 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 {
   width: 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 {
   width: 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 {
   width: 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 {
   width: 0;
   height: 0;
   border-top: 100px solid blue;
   border-right: 100px solid transparent;
}

Triangle Top Right

css3-shapes-09

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

Triangle Bottom Left

css3-shapes-10

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

Triangle Bottom Right

css3-shapes-11

#triangle-bottomright {
   width: 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;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

Diamond

css3-shapes-13

#diamond {
   width: 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 {
   width: 140px;
   height: 80px;
   background: blue;
}

Parallelogram

css3-shapes-15

#parallelogram {
   width: 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;
   width: 100px;
   background: blue;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 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;
   width: 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;
   width: 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;
   width: 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 {
   width: 100px;
   height: 100px;
   background: blue;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute;
   border-bottom: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
}
#octagon:after {
   height: 0;
   width: 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 {
   width: 120px;
   height: 80px;
   background: blue;
   position: absolute;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 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;
   width:126px;
/* width has to be 70% of height */
/* could use width: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 {
  width: 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 {
  width: 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 {
  width: 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;
   width: 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;
   width: 164px;
   height: 80px;
}
#infinity:before, #infinity:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 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é.

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !