用纯css绘制各种基础图形的复习

最新推荐文章于 2024-05-11 18:21:57 发布

Alice_yo

最新推荐文章于 2024-05-11 18:21:57 发布

阅读量169

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Alice_yo/article/details/107284852

版权

由于之前总在使用各种字体图标或者svg图片（毕竟使用 CSS 来做图标意义不是很大），但怎么实现这些图标用到的一些技巧及思路觉得还是要回顾一下，分享这篇博客，也是自己对css绘制图形这个知识的补充，所以代码并没有考虑兼容性方面的问题
首先从简单的开始：（正方形矩形就省略叭~）
一、圆的分类（circle）
实心圆：
在这里插入图片描述

.circle{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background: red;
	}

圆环：
在这里插入图片描述

.circle{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border:10px solid;
	}

椭圆：
在这里插入图片描述

.circle{
		width: 200px;
		height: 100px;
		border-radius: 50%/50%;
		background: pink; 
	}

注意一点：border-radius: 50%/50%;可以改为
border-radius: 100px/50px; 但是会有局限性如果这个图形的宽和高变化时那么此处也要变化所以写成50%/50%更加灵活

半圆：
在这里插入图片描述

.circle{
        width: 200px;
        height: 100px;
        border-radius: 100px 100px 0 0;/* 左上、右上、右下、左下 */
        //换成下半圆border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 */
        background: pink;
        margin: 10px;
    }

二、三角形的分类（triangle）
在这里插入图片描述

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

三、吃豆豆的小人（pacman ）

之前用canvas绘制的吃豆豆的小人用css也可以绘制出来
在这里插入图片描述

.pacman {
         width: 0px;
         height: 0px;
         border-right: 60px solid transparent;
         border-top: 60px solid yellow;
         border-left: 60px solid yellow;
         border-bottom: 60px solid yellow;
         border-top-left-radius: 60px;
         border-top-right-radius: 60px;
         border-bottom-left-radius: 60px;
         border-bottom-right-radius: 60px;
         }

四、爱心（heart）
在这里插入图片描述

 .heart{
        width: 100px;
        height: 100px;
        transform: rotate(45deg);/*旋转成斜的正方形*/
        background-color: red;
        margin-top: 40px;
        margin-left: 40px;
    }
    .heart::before{
        position: absolute;/*要用绝对定位*/
        content: '';/*此项必须加，不然长度为0*/
        background-color: red;
        display: block;
        width: 100px;
        height: 100px;
        border-radius: 50%;/*变圆*/
        left: -50px;
    }

五、对话框（talkbubble ）
在这里插入图片描述

.talkbubble {
        width: 120px;
        height: 80px;
        background: red;
        position: relative;
        border-radius:15px;
        margin: 25px;
        }
    .talkbubble:before {
        content:"";
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 26px solid red;
        border-bottom: 13px solid transparent;
        }

六、阴阳八卦图
在这里插入图片描述

.all{
       width: 96px;
       height: 48px;
       border: black solid 2px;
       border-width: 2px 2px 50px 2px;
       border-radius: 100%;
       position: relative;
       }
    .all:before{
       content: "";
       position: absolute;
       top: 50%;
       left: 0;
       background: #eee;
       border: 18px solid black;
       border-radius: 100%;
       width: 12px;
       height: 12px;
       }
    .all:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background:black;
        border: 18px solid white;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }