Share Tạo bong bóng lời thoại với CSS

filiallion · 04/30/2018

Có thể nói CSS là một trong những ngôn ngữ không thể thiếu khi thiết kế web, đây là một trong những ngôn ngữ mà các bạn phải học đầu tiên nếu muốn đi theo con đường thiết kế và phát triển web. Ngày nay CSS đã trở thành một chuẩn công nghiệp cho xây dựng các website. Dù các bạn là một nhà thiết kế hay nhà phát triển web, các bạn cũng nên biết cơ bản về nó. CSS là cầu nối giữa thiết kế và lập trình, và bất kỳ ai làm về web cũng phải có kiến thức chung về CSS. Nếu các bạn mới bắt đầu làm việc với CSS, hãy bắt đầu với một trình soạn thảo yêu thích và làm theo các hướng dẫn nhỏ gọn, đơn giản mà tôi hướng dẫn các bạn.

Các hướng dẫn của tôi về CSS không phải là những hướng dẫn cung cấp nhiều kiến thức mà chỉ đơn giản đó là những hướng dẫn thực hiện một vài thành phần nhỏ chỉ với vài câu lệnh ngắn gọn chứ không phải một loạt các class kèm với các thuộc tính rờm rà, dư thừa. Với cách thiết kế như vậy cũng chứng tỏ sức mạnh tiềm tàng của CSS mà các bạn có thể chưa khám phá hết được.

Và với bài viết này, tôi sẽ hướng dẫn các bạn tạo một bong bóng lời thoại (Hay còn gọi là speech bubble) chỉ với vài dòng mã lệnh CSS đơn giản như sau:

CSS:

.speech-bubble {
    width: 120px;
    height: 80px;
    position: absolute;
    background: #0062af;
    border-radius: 10px;
}

.speech-bubble::before {
    width: 0;
    height: 0;
    margin: 13px 0 0 -25px;
    position: absolute;
    content: "";
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 26px solid #0062af;
}

Với class mà tôi định nghĩa như trên thì việc sử dụng để tạo ra bong bóng lời thoại chỉ đơn giản với một dòng lệnh HTML như sau:

HTML:

<div class="speech-bubble"></div>

Share Tạo bong bóng lời thoại với CSS

filiallion

Administrator