Sudut Tumpul

Sahabat pasti masih ingat istilah Sudut Tumpul dalam pelajaran Matematika di SMP, yaitu sebuah sudut yang besarnya antara 900 dan 1800. Tapi kali ini saya tidak akan membahas hal itu melainkan bagaimana cara membuat bingkai yang sudutnya tumpul.

Suatu ketika kita mungkin merasa perlu untuk membuat teks berbingkai untuk melengkapi postingan atau juga diletakkan di sidebar. Kode dasar untuk membuat bingkai adalah

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:2px solid #FF0000">teks</div>

Hasilnya seperti ini

teks

Tampak bahwa keempat sudutnya runcing. Bandingkan dengan bingkai berikut ini.

teks

Sudut seperti inilah yang saya maksud sebagai Sudut Tumpul. Kode untuk membuatnya sbb :

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:1px solid #FF0000; border-top-left-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px;border-bottom-right-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px; border-top-right-radius:12px; -moz-border-radius-topright:12px; -webkit-border-top-right-radius:12px;border-bottom-left-radius:12px; -moz-border-radius-bottomleft:12px; -webkit-border-bottom-left-radius:12px">teks</div>

Jika yang akan dibuat tumpul hanya sebagian, maka kodenya bisa dikurangi. Misalnya hanya kiri atas dan kanan bawah yang dibuat tumpul, maka kode yang memuat top-right (kanan atas) dan bottom-left (kiri bawah) dihilangkan sehingga menjadi

<div style="text-align:center;padding-top:10px;padding-bottom:10px;background:#FFFFCC;border:2px solid #FF0000; border-top-left-radius:12px; -moz-border-radius-topleft:12px; -webkit-border-top-left-radius:12px;border-bottom-right-radius:12px; -moz-border-radius-bottomright:12px; -webkit-border-bottom-right-radius:12px">teks</div>

Hasilnya akan seperti ini

teks

Beberapa hal yang harus disesuaikan antara lain

  • Tebal bingkai atau border. Pada contoh ini tebalnya 2px
  • Warna bingkai. Pada contoh ini kode warnanya #FF0000
  • Warna latar belakang atau background. Pada contoh ini kode warnanya #FFFFCC
  • Kelengkungan sudut atau radius. Pada contoh ini kelengkungannya 12px
  • Jarak teks dengan bingkai atau padding. Pada contoh ini jarak atas dan bawahnya 10px
  • Perataan teks. Pada contoh ini dipilih center. Jika mau rata kiri kanan maka diganti justify

Selamat mencoba membuat Sudut Tumpul, semoga bermanfaat

19 thoughts on “Sudut Tumpul

  1. karena buka di hape saya ga bisa lihat hasilnya Pak. Tapi njenengan memang kreatif.. 🙂


    Belum terlalu kreatif Mas.
    Cuma pantang mundur saja

    [Reply]

  2. keren pak…jadi kalo nyari kode-kode yang beginian di blog ini pake label “Panduan” ya pak?


    Iya. Supaya gampang saya masukkan kategori panduan

    [Reply]

  3. Maturnuwun pak….ada ilmu baru, tak bookmarks nggih pak? Sapa tau suatu saat pengin mencoba hehehe


    Selamat mencoba Mas

    [Reply]

  4. ternyata bikin artikel menarik di blog itu ga gampang. . .
    semoga apa yang saya dapat di blog ini bisa saya jadikan referensi buat blog saya.
    makasih gan.


    Sama2 Bro

    [Reply]

  5. sudut tumpul ternyata HTMLnya lebih “cerewet” ya pak Mar

    Salam saya Pak Mars


    Iya Om. Kodenya ribet sekali dan berbelit2.
    Salam kembali…

    [Reply]

  6. nah kode koyo ngene, pernah liat aku di theme nya mas Satrya, tapi yo tetep orang mudeng pak, tak copy wae lah kode ne.


    Selamat membuat sudut tumpul Mas

    [Reply]

  7. makasih Pakdhe atas tipsnya… kalau mau buat sesuatu menjadi tumpul dan lancip memang Pakdhe Mars jagonya

    Hahahaha
    Belum jago. Masih amatiran

    [Reply]

  8. Karena ‘tumpul’, saya sulit menyimpul pelajaran sudut tumpul ini, sementara dikumpul di folder dulu. Terima kasih Pak Mars selalu berbagi ilmu, salam.

    Biar tumpul asal ngumpul…

    [Reply]

  9. kiran tadi Ruhut Sitompul, mister..
    btw, sangat inspiratif… sangat bermanfaat bagi calon webmaster

    Bagus buat SEO…

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *