Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS
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.
Belum ada Komentar untuk "Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS"
Posting Komentar