Tidadigi Logo

CSS Mustache

Cách tạo hình ria mép bằng CSS mà không cần dùng ảnh. Ta có thể tạo ria mép cách điệu bằng thuộc tính CSS. Chúng ta sử dụng các hình dạng đơn giản như vòng tròn và cung tròn.

Đây là hướng dẫn từng bước giúp bạn tạo ria mép bằng CSS. Chúng ta dùng các thuộc tính và một số kiểu dáng đơn giản. Chúng tôi đã đơn giản hóa từng bước để bạn dễ hiểu hơn.

Các bước để tạo ria mép:

Bước 1: Tạo vòng tròn cơ sở

  • Bắt đầu bằng cách tạo một vòng tròn màu đen để làm nền cho ria mép. Vòng tròn này có đường kính 180px và border-radius là 50%. Điều này đảm bảo nó trông hoàn toàn tròn trịa.
  • Để căn giữa vòng tròn theo chiều ngang trên trang, hãy đặt margin bên trái là 350px.
  • Sử dụng giá trị currentColor cho background-color để tự động cập nhật màu nền. Màu nền sẽ khớp với thuộc tính color của phần tử.
HTML 
<html>

<head>
    <meta charset="UTF-8">
    <title>mustache</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .mustache {
            width: 180px;
            height: 180px;
            left: 350px;
            border-radius: 50%;
            position: absolute;
            color: black;
            background-color: currentColor;
        }
    </style>
</head>

<body>
    <div class="mustache"></div>
</body>

</html>

Output: css-mustache

Bước 2: Thêm bóng để tạo hai vòng tròn

  • Để mô phỏng hai phần của ria mép, ta dùng box-shadow để tạo hai bóng tròn.
  • Các bóng này sẽ được đặt cạnh nhau với x-offset lần lượt là 150px và 300px. Y-offset là 240px tạo ra hai vòng tròn nằm ngang.
HTML 
<html>

<head>
    <meta charset="UTF-8">
    <title>mustache</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .mustache {
            width: 180px;
            height: 180px;
            left: 350px;
            border-radius: 50%;
            position: absolute;
            color: black;
            background-color: currentColor;
            box-shadow:
                150px 240px 0 0 currentColor,
                300px 240px 0 0 currentColor;
        }
    </style>
</head>

<body>
    <div class="mustache"></div>
</body>

</html>

Output: css-mustache

Bước 3: Tạo hình bên trái của ria mép

  • Vòng tròn ban đầu không còn cần thiết, chỉ các vòng tròn bóng đổ là còn lại. Bây giờ, ta xóa vòng tròn cơ sở và tập trung tạo hình bên trái.
  • Sử dụng pseudo-element ::before để tạo hình cung, đại diện cho nửa trái ria mép. Điều này đạt được bằng cách điều chỉnh kích thước và xoay phần tử -40 độ.
HTML 
<html>

<head>
    <meta charset="UTF-8">
    <title>mustache</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .mustache {
            width: 180px;
            height: 180px;
            left: 350px;
            border-radius: 50%;
            position: absolute;
            color: black;
            box-shadow:
                150px 240px 0 0 currentColor,
                300px 240px 0 0 currentColor;
        }

        .mustache::before {
            content: "";
            position: absolute;
            left: 30px;
            top: 120px;
            width: 210px;
            height: 120px;
            border-bottom: solid 180px currentColor;
            border-radius: 0 0 0 100%;
            transform: rotate(-40deg);
            transform-origin: right 210px;
        }
    </style>
</head>

<body>
    <div class="mustache"></div>
</body>

</html>

Output: css-mustache

Bước 4: Tạo hình bên phải của ria mép

  • Để hoàn thành ria mép, ta cần tạo hình bên phải tương tự bên trái. Điều này được thực hiện bằng pseudo-element ::after và xoay nó 40 độ.
  • Bước cuối cùng này sẽ thêm tính đối xứng và cân bằng cho thiết kế. Như vậy chúng ta đã hoàn thành hình dạng ria mép.
HTML 
<html>
<head>
    <meta charset="UTF-8">
    <title>mustache</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .mustache{
            width:180px;
            height:180px;
            left:350px;
            border-radius:50%;
            position:absolute;
            color:black;
            box-shadow:
            150px 240px 0 0 currentColor,
            300px 240px 0 0 currentColor;
        }
        .mustache::before{
            content:"";
            position:absolute;
            left:30px;
            top:120px;
            width:210px;
            height:120px;
            border-bottom:solid 180px currentColor;
            border-radius:0 0 0 100%;
            transform:rotate(-40deg);
            transform-origin:right 210px;
        }
        .mustache::after{
            content:"";
            position:absolute;
            left:390px;
            top:120px;
            width:210px;
            height:120px;
            border-bottom:solid 180px currentColor;
            border-radius:0 0 100%0;
            transform:rotate(40deg);
            transform-origin:left 210px;
        }
    </style>
</head>
<body>
    <div class="mustache"></div>
</body>
</html>

Output: css-mustache

Bằng cách dùng các thuộc tính CSS như box-shadow, border-radius và pseudo-elements (::before và ::after). Ta có thể tạo các hình dạng phức tạp như ria mép mà không cần ảnh. Kỹ thuật này cho phép thiết kế có khả năng mở rộng và đáp ứng tốt. Nó cũng thích ứng với nhiều bảng màu và bố cục khác nhau.


Last Updated : 21/07/2025