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 {
width: 140px;
height: 140px;
background: blue;
}
Circle
#circle {
width: 140px;
height: 140px;
background: blue;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
Oval
#oval {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Up Triangle
#up-triangle {
width: 0;
height: 0;
border-bottom: 120px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Down Triangle
#down-triangle {
width: 0;
height: 0;
border-top: 120px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Left Triangle
#left-triangle {
width: 0;
height: 0;
border-right: 100px solid blue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
Right Triangle
#right-triangle {
width: 0;
height: 0;
border-left: 100px solid blue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 100px solid transparent;
}
Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 100px solid transparent;
}
Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 100px solid transparent;
}
Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 100px solid transparent;
}
Trapezium
#trapezium {
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
Diamond
#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
#rectangle {
width: 140px;
height: 80px;
background: blue;
}
Parallelogram
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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é.