Trước đây, để tạo các góc cạnh cho hình ảnh, chúng ta thường phải dùng đến những phần mềm tạo ảnh chuyên nghiệp như Photoshop ,để có thể cắt các góc của hình. Nhưng giờ thì mọi chuyện đã khắc hẳn, với sự hỗ trợ của CSS3 Transform và kỹ thuật Masking, chúng ta có thể tạo ngay những hình ảnh góc cạnh mà không cần phải dùng đến phần mềm cắt ảnh nào.

Hôm nay , trong bài viết này, mình sẽ chia sẻ cho các bạn đoạn css giúp chúng ta tạo hình với 6 góc bằng nhau. Nếu muốn tìm hiểu kỹ về cách sử dụng thì các bạn có thể download bài viết về máy để tham khảo, còn không thì có thể copy và áp dụng trực tiếp cho các hình ảnh của các bạn. Kỹ thuật sử dụng ở đây rất đơn giản, chỉ việc sử dụng thuộc tính transform và quay hình ảnh với góc 60 độ và dùng thuộc tính overflow:hidden để làm kỹ thuật Masking.

Các bạn có thể tham khảo hình ảnh minh họa bên dưới :

Bước 1: HTML
Để có thể tạo được hình với 6 góc, chúng ta cần khung html chuẩn như sau :

</pre>
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
 
<hr />
 
We Open Everyday</div>
 
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url('images/2.jpg');">
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<pre>

Trong đoạn html bên trên, chúng ta sẽ làm ví dụ 2 hình, một là chứa đoạn chữ bên trong, và một là dùng cho hình ảnh background.

Bước 2 : Định dạng CSS

Các bạn chỉ cần copy đoạn css bên dưới để áp dụng là okie.

.hex {
    width:150px;
    height:86px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: auto 173px;
    -moz-background-size: auto 173px;
    -ms-background-size: auto 173px;
    -o-background-size: auto 173px;
    position: relative;
    float:left;
    margin:25px 5px;
    text-align:center;
    zoom:1;
}
 
    .hex.hex-gap {
        margin-left: 86px;
    }
 
    .hex a {
        display:block;
        width: 100%;
        height:100%;
        text-indent:-9999em;
        position:absolute;
        top:0;
        left:0;
    }
 
    .hex .corner-1,
    .hex .corner-2 {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: inherit;
        z-index:-2;
        overflow:hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
 
    .hex .corner-1 {
        z-index:-1;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }
 
    .hex .corner-2 {
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }
 
    .hex .corner-1:before,
    .hex .corner-2:before {
        width: 173px;
        height: 173px;
      content: '';
      position: absolute;
      background: inherit;
      top:0;
      left: 0;
      z-index: 1;
      background: inherit;
      background-repeat:no-repeat;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
 
    .hex .corner-1:before {
        -webkit-transform: rotate(-60deg) translate(-87px, 0px);
        -moz-transform: rotate(-60deg) translate(-87px, 0px);
        -ms-transform: rotate(-60deg) translate(-87px, 0px);
        -o-transform: rotate(-60deg) translate(-87px, 0px);
        transform: rotate(-60deg) translate(-87px, 0px);
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }
 
    .hex .corner-2:before {
        -webkit-transform: rotate(60deg) translate(-48px, -11px);
        -moz-transform: rotate(60deg) translate(-48px, -11px);
        -ms-transform: rotate(60deg) translate(-48px, -11px);
        -o-transform: rotate(60deg) translate(-48px, -11px);
        transform: rotate(60deg) translate(-48px, -11px);
        bottom:0;
    }

Ngoài ra các bạn còn có thể tùy chỉnh thêm cho đẹp mắt hơn như sau :

/* Custom styles*/
    .hex .inner {
        color:#eee;
    }
 
    .hex h4 {
        font-family: 'Josefin Sans', sans-serif;
        margin:0;
    }
 
    .hex hr {
        border:0;
        border-top:1px solid #eee;
        width:60%;
        margin:15px auto;
    }
 
    .hex p {
        font-size:16px;
        font-family: 'Kotta One', serif;
        width:80%;
        margin:0 auto;
    }
 
    .hex.hex-1 {
        background: #74cddb;
    }
 
    .hex.hex-2 {
        background: #f5c53c;
    }
 
    .hex.hex-3 {
        background: #80b971;
    }

Rất đơn giản và dễ thực hiện phải không nào, mình hy vọng là qua bài viết này, các bạn sẽ có thêm kiến thức cũng như kinh nghiệm sử dụng CSS3. Đặc biệt hơn là mình mong các bạn có thể có nhiều sáng tạo hơn để tạo nhiều hình với các góc khác nhau.

Chúc các bạn thành công !