Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS

April 17, 2018 0 Comments



Selamat Siang kali ini kita akan membuat Div bubble dengan menggabungkan bentuk persegi panjang dan segitiga kemudian pinggiranya diberi border dan hasilnya seolah-olah hanya satu bentuk. div buble ini bisa digunakan untuk menampilkan komentar, untuk chat bubble dll.
langsung saja, ini scriptnya:

<!DOCTYPE html>
<html>
<head>
                <title>Div Bubble Box</title>
                <style type="text/css">
                                body {
                                                background-color: #de302f;
                                                font-family: sans-serif;
                                                font-size: 14px;
                                                line-height: 1.4;
                                                color: #fff;
                                                font-weight: 100;
                                }
                                .container {
                                                position: relative;
                                                margin: 50px auto;
                                                max-width: 600px;
                                                height: auto;
                                                border: 2px solid #fff;
                                                padding: 30px;
                                                box-sizing: border-box;
                                }
                                .container:after {
                                                position: absolute;
                                                width: 50px; height: 50px;
                                                content: '';
                                                transform: rotate(45deg);
                                                margin-top: -25px;
                                                background-color: #de302f;
                                }
                                .satu:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 100%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                                .dua:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: 50%;
                                                left: 0%;
                                                margin-left: -27px;
                                                content: '';
                                }
                                .tiga:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 50%;
                                                right: 0%;
                                                margin-right: -27px;
                                                content: '';
                                }
                                .empat:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: -2%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                </style>
</head>
<body>
                <div class="container satu">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container dua">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor      sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container tiga">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container empat">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
</body>
</html>


Sekianlah tutorial kali, selamat mencoba, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar dibawah.

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar :

Langganan: Posting Komentar ( Atom )