CSS绘制各种形状

最新推荐文章于 2024-04-18 00:50:42 发布

落花新月

最新推荐文章于 2024-04-18 00:50:42 发布

阅读量2k

点赞数 3

分类专栏： Web前端文章标签：形状 CSS3 心形六边形扇形

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50781054

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.伪类：a:hover a:link div:nth-child(n)

伪元素：before after first-letter

2.使用before和after必须要有content这个属性

3.before和after默认是行内元素，行内元素是没有宽高的。

4.加了浮动或者绝对定位的元素，默认把行内元素转换为行内块元素。

5.CSS绘制各种形状代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS绘制各种形状</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin:100px;
            background-color:#FF5008;
            text-align: center;             /*左右居中对齐*/
            line-height: 100px;            /*上下居中对齐*/
        }
        .circle{
            border-radius: 50%;      /*半径为50%*/
        }
        .semi-circle{
            border-radius: 50px 50px 0 0;
            height: 50px;
        }
        .sector{
            border-radius: 0 0 100px 0;
        }
        .arc{
            border-radius: 0 100px;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        /*小三角*/
        .arrow{
            width: 0;
            height: 0;
            background: none;
            border: 50px solid red;
            border-color:red transparent transparent transparent;
        }
        /*
        *rectangle相关的都是为了实现类似于对话框的效果
        */
        .rectangle{
            width: 200px;
            border-radius: 15px;
            position: relative;
        }
        .rectangle::before{
            width: 0;
            height: 0;
            content:'';
            border:15px solid red;
            border-color: transparent transparent transparent #FF5008;         /*transparent表示透明*/
            position: absolute;
            right:-30px;
            top:35px;              /*(100-15-15)/2=35*/
        }
        /*
        *以下跟heart有关的都是心形的制作
        */
        .hear{
            width: 100px;
            height: 150px;
            background: none;
            position: relative;      /*子绝父相*/
        }
        .hear::before,.hear::after{
            content: "";    /*content属性一定不能省*/
            width: 100%;
            height: 100%;
            background-color: red;
            position: absolute;          /*通过定位给这个行内元素转换为行内块，让它有了宽和高*/
            border-radius: 100px 100px 0 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);

        }
        .hear::after{
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            left:85px;      /*after元素做一个移动*/
        }
        .lgbox,.mbox,.smbox{
            margin: 0;
            visibility: hidden;        /*隐藏显示，但是是占位置的*/
        }
        .lgbox{
            width: 200px;
            height: 250px;
            margin: 200px;
            background: #f552ff;
            transform: rotate(120deg);
        }
        .mbox{
            width: 100%;
            height: 100%;
            background: #2e51ff;
            -webkit-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
        }
        .lgbox,.mbox{
            overflow: hidden;
        }
        .smbox{
                width: 100%;
                height:100%;
                background-color: #02ff1c;
                transform: rotate(-60deg);
                visibility: visible;    /*最上面的这个盒子显示出来*/
                background: url("images/01.png") no-repeat;
                -webkit-background-size: cover;
                background-size: cover;
            }
    </style>

</head>
<body>
  <div>矩形</div>
  <div class="circle">圆形</div>
  <div class="semi-circle">半圆</div>
  <div class="sector">扇形</div>
  <div class="arc">弧形</div>
  <div class="arrow"></div>
  <div class="rectangle">特效矩形</div>
  <div class="hear"></div>
  <div class="lgbox">
      <div class="mbox">
          <div class="smbox"></div>
      </div>
  </div>
  <div class="lgbox">
      <div class="mbox">
          <div class="smbox" style="background-image: url(images/02.png)"></div>
  </div>
  </div>

</body>
</html>

运行效果：

注：学习视频来自传智播客

落花新月

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS绘制各种形状

1.伪类：a:hover a:link div:nth-child(n) 伪元素：before after first-letter2.使用before和after必须要有content这个属性3.before和after默认是行内元素，行内元素是没有宽高的。4.加了浮动或者绝对定位的元素，默认把行内元素转换为行内块元素。5.
复制链接

扫一扫