纯css制作常见的图形

.星空.2023-09-07 10:18

1.正方形

css 复制代码

 <div class="square"></div>

css 复制代码

.square {
        width: 100px;
        height: 100px;
        background-color: #ffff00;
      }

效果：

html 复制代码

<div class="rectangle"></div>

css 复制代码

 .rectangle{
        width: 200px;
        height: 100px;
        background-color: #ff0000;
     }

html 复制代码

<div class="rhombus"></div>

css 复制代码

 .rhombus{
       width: 100px;
        height: 100px;
        transform: rotate(45deg);
        background-color: #ffff00;
     }

html 复制代码

<div class="triang"></div>

css 复制代码

  .triang{
        width: 0px;
        height: 0px;
        border: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
      }

html 复制代码

<div class="trapezoid"></div>

css 复制代码

 .trapezoid {
        width: 100px;
        height: 0px;
        border: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
      }