CSS tạo hình tam giác

Để có được hình tam giác thì thật đơn giản với các công cụ đồ họa, đơn giản đến mức không cần vẽ mà chỉ cần chèn một hình shape trong hộp công cụ vậy là đã có được hình ảnh trong vài giây, nhưng nếu linh động và không muốn sử dụng hình ảnh bạn vẫn có thể tạo ra nó chỉ với vài thuộc tính CSS đơn giản, điều này sẽ có ích cho việc tạo ra những nút trên web hay ứng dụng làm tooltip.

Đầu tiên chúng ta hãy cùng xem xét trường hợp nếu định kiểu đường viền cho một phần tử không mà không quan tâm đến kích thước phần tử đó như đoạn CSS sau:

1	.triangle{

2	border-color: blue orange red green;

3	border-style: solid;

4	border-width: 100px 100px 100px 100px;

5	height: 0px;

6	width: 0px;

7

}

Kết quả bạn có được 1 hình vuông được gép lại từ 4 tam giác tương ứng với 4 đường viền đã định kiểu, bây giờ nếu thay kiểu đường viền khác thì sẽ như thế nào? bạn sẽ thấy kết quả như hình dưới nếu xem trên trình duyệt firefox.

Bạn sẽ sử dụng kiểu solid để tạo ra các hình tam giác bằng cách tạo trong xuốt cho 3 đường viền còn lại, hoặc cho một đường viền có chiều rộng bằng 0, sau đó tạo trong suốt cho 2 đường viền còn lại. Xem ví dụ sau để hiểu rõ điều này:

01	/* Tạo tam mũi tên hướng lên trên */

02	.arrow-up {

03	width:0px;

04	height:0px;

05	border-left:50px solid transparent;

06	border-right:50px solid transparent;

07	border-bottom:50px solid #2f2f2f; /* Tam giác phía dưới được đổ màu */

08

}

09	/* Tạo mũi tên hướng xuống */

10	.arrow-down {

11	width:0px;

12	height:0px;

13	border-left:50px solid transparent;

14	border-right:50px solid transparent;

15	border-top:50px solid #2f2f2f; /* Tam giác phía trên được đổ màu */

16

}

17	/* Tạo mũi tên hướng bên trái */

18	.arrow-left {

19	width:0px;

20	height:0px;

21	border-bottom:50px solid transparent;

22	border-top:50px solid transparent;

23	border-right:50px solid #2f2f2f; /* Tam giác phải được đổ màu */

24

25

}

26	/* Tạo mũi tên hướng bên phải */

27	.arrow-right {

28	width:0px;

29	height:0px;

30	border-bottom:50px solid transparent;

31	border-top:50px solid transparent;

32	border-left:50px solid #2f2f2f; /* Tam giác trái được đổ màu */

33

}

Kết quả chúng ta có được như hình phía dưới.

Tuy nhiên chúng ta không thể tạo đường viền cho tam giác bằng border được vì bản chất nó đã là border, để tạo đường viền bạn sẽ tạo ra 2 hình tam giác chồng lên nhau giựa vào thuộc tính position. Ứng dụng điều này ta có thể tạo ứng dụng tooltip như sau:

view sourceprint?

01	.arrow-box{

02	position: relative;

03	width: 280px;

04	height: 80px;

05	background: #206d97;

06	border: 4px solid #4ec7ab;

07

}

08	.arrow-box:after, .arrow-box:before{

09

width:0;

10

height:0;

11	content: "";

12	position: absolute;

13	bottom: 100%;

14

}

15	.arrow-box:after{

16	border: 20px solid transparent;

17	border-bottom-color: #206d97;

18	left: 5px;

19

}

20	.arrow-box:before{

21	border: 25px solid transparent;

22	border-bottom-color: #4ec7ab;

23

}

Ở ví dụ trên phần từ .arrow-box:after chính là mũi tên nằm bên trên và có màu giống với phần tử .arrow-box, phần tử .arrow-box:before chính là mũi tên nằm ở phía dưới, và có màu giống với đường viền phần tử.arrow-box. Demos.

Theo: http://sothichweb.com/

-----------------------------------------------------------

Tạo hình tam giác với CSS

Trong thiết kế blog/web site rất nhiều lần cần sử dụng các thuộc tính tạo tam giác bằng CSS mà không cần dùng hình ảnh. Bài viết này namkna giới thiệu với các bạn sử dụng mẹo nhỏ với thuộc tính border trong css để tạo ra hình tam giác.

1- Đầu tiên tạo một thẻ div với id là demo:

<div id="demo">
.....
</div>

Sau đó bạn xem hình dưới để thấy được cách tạo ra hình tam giác.

Khi để width và height bằng 0 thì thẻ div với border-width bằng 10px sẽ là hình vuông kết hợp của 4 hình tam giác tương đương với 4 cạnh border-left ,border-right, border-bottomvà border-top.Để tạo ra hình tam giác ta sẽ ẩn 3 trong 4 border bằng cách để cho chúng màu trong suốt với giá trị transparent.

Bạn cũng có thể thay đổi kích thước của tam giác bằng cách thay đổi độ rộng của border ví dụ như :

#demo{
    .....
    border:10px solid transparent;
    border-top:15px solid red;
}

Hình tam giác thường được tạo bằng pseudo-class của một phần tử.Ví dụ như:

#demo{
    width:80px;
    height:80px;
    background-color:#232323;
    position:relative;
}

#demo:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    border:10px solid transparent;
    ...../*code thêm ở hình dưới*/.....
}

Xem hình dưới:

Tuy chỉ là một mẹo nhỏ nhưng nó lại có khá nhiều ứng dụng hữu ích giúp làm tăng thẩm mỹ của trang web. Ví dụ như tạo tooltip hay ribbon..

Tạo tooltip

Ảnh minh họa:

HTML code :

<span id="tooltip">Tooltip bằng CSS</span>

CSS code :

#tooltip{
    background-color:#232323;
    background-image:-moz-linear-gradient(top,#4a4a4a,#232323);
    background-image:-o-linear-gradient(top,#4a4a4a,#232323);
    background-image:-webkit-linear-gradient(top,#4a4a4a,#232323);
    background-image:linear-gradient(top,#4a4a4a,#232323);
    color:white;
    padding:8px 15px;
    font-size:14px;
    border-radius:5px;
    font-family:helvetica,sans-serif;
    position:Relative;
    text-shadow:0 1px 0 rgba(0,0,0,0.7);
}
 
#tooltip:after{
    content:"";
    width:0px;
    height:0px;
    position:absolute;
    border:9px solid transparent;
    border-top:9px solid #232323;
    left:45%;
    bottom:-16px;
}

Tạo ribbon

Ảnh minh họa:

HTML code:

<div id="demo">
    <h1 class="ribbon">Ribbon bằng CSS</h1>
    <p><!-- nội dung --></p>
</div>

CSS code:

#demo{
    background-color:#232323;
    width:200px;
    padding:50px 25px 20px 15px;
    position:relative;
    color:#c8c8c8;
    font-family:helvetica,sans-serif;
    line-height:20px;
}
 
.ribbon{
    position:absolute;
    height:30px;
    top:10px;
    left:-8px;
    background-color:#0072ff;
    padding:0 60px 0 15px;
    max-width:180px;
    color:white;
    line-height:30px;
    font-weight:400;
    font-size:14px;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}
 
.ribbon:before,.ribbon:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:0;
    height:0;
    bottom:-6px;
    left:3px;
    border:6px solid transparent;
    border-bottom:6px solid #023a7f;
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

Tuy nhiên tại sao namkna lại sử dụng cả :before và :after.Lý do là tại vì ở trình duyệt firefox hiện nay có một lỗi nhỏ khi ta sử dụng thuộc tính transform với hình tam giác.Xem hình dưới đây hoặc các bạn có thể test ngay trên trình duyệt có thể nhìn thấy ngay.

Có thể thấy lỗi nhỏ này làm hình hiện thị trên màn hình trông không được đẹp mắt do vậy tôi sự dụng 2 hình tam giác chồng lên nhau bằng cả 2 lớp giả :before và :after để là mờ cái đường kẻ không mong muốn kia đi như hình dưới:

Trên chỉ là 2 ví dụ đơn giản về sự hữu ích của việc tạo hình tam giác bằng css,hi vọng mẹo nhỏ này sẽ giúp ích được cho các bạn.

Theo: http://sondaika.blogspot.com/

---------------------------------------------------------------------------------------------