纯CSS画的基本图形（矩形、圆形、三角形、正方形、正方体）

最新推荐文章于 2023-04-03 10:17:21 发布

云中自有锦书

最新推荐文章于 2023-04-03 10:17:21 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_41282726/article/details/98481781

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

参考：纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

https://www.cnblogs.com/ming1025/p/7363074.html

1.矩形

 #rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

2.圆形

#circle{
    width:100px;
    height:100px;
    background:red;
    border-radius:50px;
}

3.三角形

#triangle-up{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
}

#triangle{
    width:0;
    height:0;
    border-top:50px solid blue;
    border-right:50px solid red;
    border-bottom:50px solid green;
    border-left:50px solid yellow;
}

4.椭圆

#oval {
   width:200px;
   height:100px;
   background:red;
   border-radius:100px/50px;
}

5.正方形

#square{
    width：100px;
    height:100px;
    background:red;
}

6.正方体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      .box {
        width:200px;
        height: 200px;
        margin:100px auto;
        position:relative;
        left:50%;
        margin-left:-100px;
        transform-style:preserve-3d;   /*创造3d空间*/
        transform:rotateY(-30deg) rotateX(57deg);  /*方便观看立体效果*/
      }
      .box>div{
        width: 200px;
        height: 200px;
        opacity:7;
        position:absolute;
      }
      .up{
        background-color:red;
        transform:rotateX(90deg) translateZ(100px);
      }
      .down{
        background-color:orange;
        transform:rotateX(-90deg) translateZ(100px);
      }
      .left{
        background-color:yellow;
        transform:rotateY(-90deg) translateZ(100px);
      }
      .right{
        background-color:blue;
        transform:rotateY(90deg) translateZ(100px);
      }
      .before{
        background-color:cyan;
        transform:translateZ(100px);
      }
      .after{
        background-color:purple;
        transform:translateZ(-100px);
      }
  </style>
</head>
<body>
   <div class="box">
      <div class="up">1</div>
      <div class="down">2</div>
      <div class="left">3</div>
      <div class="right">4</div>
      <div class="before">5</div>
      <div class="after">6</div>
   </div>
</body>
</html>

点击正方体有炸开的效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      position: relative;
      /* 真 3 d */
      transform-style: preserve-3d;
      transition: all 20s;
      /* 只是用于辅助布局的, 布局完成可以拿掉 */
      /*perspective: 1000px;*/
    }
    ul:hover {
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
    li {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 1s;
    }
    /* 前面 */
    li:nth-child(1) {
      background-color: pink;
      transform: translateZ(100px);
    }
    /* 上面 */
    li:nth-child(2) {
      background-color: green;
      transform: rotateX(90deg) translateZ(100px);
    }
    /* 后面 */
    li:nth-child(3) {
      background-color: orange;
      transform: rotateX(180deg) translateZ(100px);
    }
    /* 下面 */
    li:nth-child(4) {
      background-color: brown;
      transform: rotateX(270deg) translateZ(100px);
    }
    /* 左面 */
    li:nth-child(5) {
      background-color: lime;
      transform: rotateY(-90deg) translateZ(100px);
    }
    /* 右面 */
    li:nth-child(6) {
      background-color: blue;
      transform: rotateY(90deg) translateZ(100px);
    }

    /* 炸开的效果 */
    ul:hover li:nth-child(1) {
      transform: translateZ(200px);
    }
    ul:hover li:nth-child(2) {
      transform: rotateX(90deg) translateZ(200px);
    }
    ul:hover li:nth-child(3) {
      transform: rotateX(180deg) translateZ(200px);
    }
    ul:hover li:nth-child(4) {
      transform: rotateX(270deg) translateZ(200px);
    }
    ul:hover li:nth-child(5) {
      transform: rotateY(-90deg) translateZ(200px);
    }
    ul:hover li:nth-child(6) {
      transform: rotateY(90deg) translateZ(200px);
    }
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>