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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Đ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



Chủ để tương tự : hình học
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thêm figure và figcaption cho hình ảnh trong ckeditor như thế nào? 17/11/20
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