CSS hình học Shipes thoi vuông chữ nhật tam giác lục giác ngôi sao trái tim

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 19/9/20.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,352
    Đã được thích:
    1,053
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Tổng hợp các CSS hình học Shipes thoi vuông chữ nhật tam giác lục giác ngôi sao trái tim,.. các hình ảnh thông dụng cần sử dụng khi thiết kế website

    1. CSS hình tròn
    hinh-tron.jpg
    HTML:
    #circle {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
     
    2.CSS hình Oval
    hinh-oval.jpg
    HTML:
    #oval {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    3.CSS hình Tam giác
    hinh-tam-giac.png
    HTML:
    #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    4. CSS hình thang
    hinh-thang.png
    HTML:
    #trapezoid {
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
    }
    5. CSS hình bình hành
    hinh-binh-hanh.png
    HTML:
    #parallelogram {
        width: 150px;
        height: 100px;
        -webkit-transform: skew(20deg);
           -moz-transform: skew(20deg);
             -o-transform: skew(20deg);
        background: red;
    }
    6. CSS hình ngôi sao 5 cánh
    hinh-ngoi-sao.jpg
    HTML:
    #star-five {
       margin: 50px 0;
       position: relative;
       display: block;
       color: red;
       width: 0px;
       height: 0px;
       border-right:  100px solid transparent;
       border-bottom: 70px  solid red;
       border-left:   100px solid transparent;
       -moz-transform:    rotate(35deg);
       -webkit-transform: rotate(35deg);
       -ms-transform:     rotate(35deg);
       -o-transform:      rotate(35deg);
    }
    #star-five:before {
       border-bottom: 80px solid red;
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       position: absolute;
       height: 0;
       width: 0;
       top: -45px;
       left: -65px;
       display: block;
       content: '';
       -webkit-transform: rotate(-35deg);
       -moz-transform:    rotate(-35deg);
       -ms-transform:     rotate(-35deg);
       -o-transform:      rotate(-35deg);
     
    }
    #star-five:after {
       position: absolute;
       display: block;
       color: red;
       top: 3px;
       left: -105px;
       width: 0px;
       height: 0px;
       border-right: 100px solid transparent;
       border-bottom: 70px solid red;
       border-left: 100px solid transparent;
       -webkit-transform: rotate(-70deg);
       -moz-transform:    rotate(-70deg);
       -ms-transform:     rotate(-70deg);
       -o-transform:      rotate(-70deg);
       content: '';
    }
    7.CSS hình trái tim
    hinh-trai-tim.png
    HTML:
    #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
           -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
             -o-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
           -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
             -o-transform-origin: 100% 100%;
                transform-origin :100% 100%;
    }
    8. CSS hình lục giác
    hinh-luc-giac.png
    HTML:
    #hexagon {
        width: 100px;
        height: 55px;
        background: red;
        position: relative;
    }
    #hexagon:before {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid red;
    }
    #hexagon:after {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid red;
    }
    9. CSS hình trăng khuyết
    hinh-mat-trang-khuyet.jpg
    HTML:
    #moon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 15px 15px 0 0 red;
    }
    Tổng hợp tại: mylop.edu.vn/examples/the-shapes-of-css/

    Bài viết liên quan: https://itseovn.com/threads/button-html5-css-rhombus-hinh-thoi-bau-duc-co-ban.320509/
     
    Cảm ơn đã xem bài:

    CSS hình học Shipes thoi vuông chữ nhật tam giác lục giác ngôi sao trái tim

    danh sách diễn đàn rao vặt gov chất lượng


Chủ để tương tự : hình học
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Button html5 css rhombus hình thoi, bầu dục cơ bản 9/9/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn cách cấu hình bản ghi MX cho Gmail trong cài đặt domain 11/8/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Chỉnh kích thước set size Width Height CKEDITOR như thế nào? 15/4/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5 1/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính canh dọc trong css, canh dọc cho chữ và hình ảnh trong css 11/9/14

Like và Share ủng hộ ITSEOVN