Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bangun Datar

    Diunggah oleh

    Baitul Arifin
    12 tayangan8 halaman

    Judul Asli

    Bangun datar

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    12 tayangan8 halaman

    Bangun Datar

    Diunggah oleh

    Baitul Arifin

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 8

    1.

    Lingkaran
    Codingan:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Lingkaran Dengan CSS </title>
    </head>
    <body>

    <style type="text/css">
    body{
    font-family: sans-serif;
    }

    .lingkaran1{
    width: 150px;
    height: 150px;
    background: #2ccada;
    border-radius: 100%;
    }
    </style>

    <h1>Membuat Lingkaran Dengan CSS</h1>

    <br/>

    <div class="lingkaran1"></div>

    </body>
    </html>
    Hasil:
    2. Oval
    Codingan:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Lingkaran Dengan CSS </title>
    </head>
    <body>

    <style type="text/css">
    body{
    font-family: sans-serif;
    }

    .oval {
    height: 200px;
    width: 100px;
    background: #07CAF3;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

    }
    </style>

    <h2>Membuat oval Dengan CSS</h2>


    <div class="segitiga1"></div>

    </body>
    </html>

    Hasil:

    3. Segitiga
    Codingan:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Segitiga Dengan CSS</title>
    </head>
    <body>

    <style type="text/css">
    .segitiga1{
    height:0px;
    width:0px;
    border-bottom:solid 120px blue;
    border-left:solid 80px transparent;
    border-right:solid 80px transparent;

    margin-bottom: 20px;

    }
    </style>
    <h2>Membuat Segitiga Dengan CSS</h2>

    <!-- segitiga ke atas -->


    Segitiga
    <div class="segitiga1"></div>

    </body>
    </html>

    Hasil:

    4. Jajar genjang
    Codingan:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Bentuk Jajar Genjang Dengan CSS</title>
    </head>
    <body>
    <style type="text/css">
    .kotak1 {
    margin: 50px;
    background: green;
    width: 200px;
    height: 200px;
    float:left;
    -ms-transform: skew(20deg); /* Support untuk IE 9 */
    -webkit-transform: skew(20deg); /* support untuk Safari */
    transform: skew(20deg); /* default syntax */
    }
    </style>

    <center>
    <h2>Jajar Genjang CSS</h2>
    </center>

    <div class="kotak1">
    Ini kotak 1.bentuk jajar genjang
    </div>

    </body>
    </html>

    Hasil:

    5. Persegi
    Codingan:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat persegi</title>
    </head>
    <body>
    <style type="text/css">
    .kotak1 {
    background: yellow;
    margin: 50px;
    width: 200px;
    height: 200px;
    float:left;
    }
    </style>

    <center>
    <h2>Persegi</h2>
    </center>

    <div class="kotak1">
    Ini kotak 1. bentuk kotak biasa/persegi
    </div>

    </body>
    </html>

    Hasil:

    6. Kerucut
    Coding :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Kerucut Dengan CSS</title>
    </head>
    <body>

    <style type="text/css">
    .kerucut{
    height: 0;
    width: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 100px solid blue;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

    }
    </style>

    <h2>Membuat Kerucut Dengan CSS</h2>

    <!-- Kerucut -->


    Kerucut
    <div class="kerucut"></div>

    </body>
    </html>
    Hasil :

    7. Segitiga siku-siku
    Coding :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Membuat Segitiga siku-sikuu Dengan CSS</title>
    </head>
    <body>
    <style type="text/css">
    .triangle-sided{
    height: 0;
    width: 0;
    border-top: 100px solid blue;
    border-right: 100px solid transparent;

    }
    </style>

    <h2>Membuat Segitiga siku-sikuu Dengan CSS</h2>

    <!-- segitiga siku-siku -->


    triangle-sided
    <div class="triangle-sided"></div>

    </body>
    </html>
    Hasil :

    Anda mungkin juga menyukai