Sebelumnya terima kasih sudah berkunjung di My Wapmaster ini, semoga anda senang dan jangan lupa saran serta Kontribusi nya apapun itu yang Anda lihat disini.

Tutorialnya kali ini saya akan mengangkat lagi tulisan dahulu, ya tulisan usang yang mungkin sudah terlupakan, apakah Anda masih ingat artikel Css Efek Sudut Terlipat disana kita dapat menciptakan bagaimana membuat sudut unik tanpa bantuan gambar sedikitpun
Mengambil sampel disana, kita lanjut Bagaimana Memasang Klip Pada Gambar Dan Background melalui Css.

Kali ini saya membutuhkan gambar kecil sebagai pendukung yaitu clip, ini hasil akhirnya :

Css Kode yang digunakan pada contoh di atas adalah sama, di akhir artikel ini kita dapat lihat demo langsung.

Selektor utama yang saya pilih disini ialah .clip dengan bantuan selektor lain seperti p ( guna mengatur isi ) dan :before ( guna mengatur clip ), hasil pertama



Dengan penerapan css diatas dengan objek gambar, hasilnya saya tidak menemukan clip yang menjadi fokus, saya berpikir kemana clip tersebut bersembunyi mungkin di balik gambar atau keluar body disebabkan position absolutenya yang terlalu jauh, ternyata perkiraan ku salah, setelah saya geser layar ponsel, saya melihat clipnya ada tapi keluar selektor .clip, ia berada tepat di ujung kiri atas, baru saya ingat bahwa css utama wapsite ini pada body saya menerapkan position:relative jadi wajar clip tersebut berada disana, untuk mengatasi hal ini saya juga menerapkan css position tersebut pada selektor target yaitu .clip, seperti ini



display: block yang saya gunakan hanya untuk mem-block gambar agar tidak mengganggu Element lain, jika Anda menerapkan gambar lebih dari satu senang sekali Anda gunakan inline-block atau inline-table.

Css akhir :

<style>
/* css clip */
.clip {position: relative;
	display: block;
}
.clip p { background: #fff; margin;0; padding:10px; border:1px solid #eee;
}
.clip:before{
	position: absolute;
	content: ' ';
height:84px;
	width:45px;
	position:absolute;
	top:-5px;
	left:30px;
	background: url(paper-clip. png) no-repeat;
}
</style>

* Download paper-clip.png

<div class="clip"><p>Cara memasang clip pada background dengan css</p></div>

Demikian mohon kritik dan saran, Terima kasih.