Share Tạo biểu tượng Pacman vui nhộn với CSS3

filiallion · 04/26/2018

Những điều mà CSS3 có thể làm sẽ khiến các bạn phải ngạc nhiên vì vậy việc các bạn có thể nắm vững các kiến thức về CSS3 là điều cần thiết nhất là đối với các bạn lập trình giao diện. Để có thể tận dụng tối đa tất cả những gì mà CSS3 có thể đáp ứng thì đòi hỏi các bạn phải mất một thời gian dài tìm hiểu và làm các dự án thực tế.

Với bài viết này, tôi sẽ hướng dẫn các bạn sử dụng CSS3 để tạo ra biểu tượng Pacman vui nhộn chỉ với vài dòng mã lệnh CSS đơn giản như sau:

CSS:

.pacman {
    width: 0px;
    height: 0px;
    border-top: 100px solid #0062af;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom: 100px solid #0062af;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: 100px solid #0062af;
    border-right: 100px solid transparent;
}

Các bạn có thể tìm hiểu thêm về CSS3 để tạo ra các biểu tượng khác mà các bạn muốn.

Share Tạo biểu tượng Pacman vui nhộn với CSS3

filiallion

Administrator