CSS绘制常见的几何图形

最新推荐文章于 2024-10-17 13:47:11 发布

原创最新推荐文章于 2024-10-17 13:47:11 发布 · 4.7k 阅读

13 ·

CC 4.0 BY-SA版权

笔记-HTML4&5/CSS2.1&3 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在网页设计中如何使用CSS来创建几何图形，包括为何不推荐使用图片，CSS的简洁与维护优势，SVG的学习成本及Canvas的适用场景。通过实例展示了CSS绘制几何图形的效果，并鼓励探索更多形状的可能性。

题外话

在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形;
实现的方式无非四种:

图片
CSS2.1&3
SVG
Canvas

就我个人而言,对于一些常见的几何图形.

图片是不推荐的[太占资源,也不利于维护]
CSS是比较推荐的,精简且方便维护
SVG也是一个很好的选择[学习成本高一点点]
Canvas看情况使用

效果图

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>CSS制作几何图形</title>
        <style type="text/css" media="screen">
        .wrapper {
            width: 25%;
            padding: 10x;
            float: left;
            height: 300px;
            text-align: center;
        }
        /*方形没啥好讲的*/
        
        .square {
            width: 200px;
            height: 200px;
            background: #fed3ca;
            box-sizing: border-box;
        }
        /*长方形也没啥好讲的*/
        
        .retangle {
            width: 200px;
            height: 100px;
            background: #2eb7ed;
        }
        /*圆形就用了css3的border-radius*/
        
        .circle {
            height: 200px;
            width: 200px;
            background: #11309B;
            border-radius: 100%;
            /*或者是宽高的一半,因为此处的值是半径*/
        }
        /*半圆这个很简单*/
        
        .semicircle {
            height: 100px;
            width: 200px;
            background: #D65E2A;
            border-radius: 100px 100px 0 0;
        }
        /*
		椭圆形也是用了border-radius,但是细化到XY轴的半径;
		最简单的椭圆就是X轴的半径为Y轴的一半,反之亦然
		*/
        
        .oval {
            width: 200px;
            height: 100px;
            background: #1C951A;
            border-radius: 100px/50px;
            /*X:100px , Y:50px;*/
        }
        /*
		三角形也挺简单的,利用的是边框实现的
		  - 宽高为0,因为只需要用到border
		  - transparent是用来透明化的,border-color是顺时针方向,你想产生什么方向的三角形都可以控制
		*/
        
        .triangle {
            width: 0;
            height: 0;
            border-width: 50px;
            border-style: solid;
            border-color: #8D0EEE transparent transparent transparent;
        }
        /*梯形的原理其实和三角形大同小异,方向同样可控制
		*/
        
        .trapezoid {
            width: 200px;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent #6ACFEE transparent;
        }
        /*菱形主要用了CSS3的transform的旋转参数,支持正反方向旋转*/
        
        .diamond {
            width: 100px;
            height: 100px;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            background: #0CCEf2;
            margin-left: 90px;
            margin-top: 30px;
        }
        /*月牙这个图形也不难,也只是微调圆的半径和阴影组合而成*/
        
        .moon {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 #0F93AA;
        }
        /*叶子这个说白了还是半径的处理*/
        
        .leaf {
            width: 200px;
            height: 200px;
            background: rgba(0, 255, 0, .5);
            box-shadow: 2px 1px 1px rgba(0, 0, 0, .1);
            border-radius: 3px 200px;
            /*两个是参数是代表对角线, X 这个字母的样子*/
        }
        /*书签这个是三角的写法的小小转换*/
        
        .bookmark {
            width: 0;
            height: 200px;
            border-left: 50px solid #A26D14;
            border-right: 50px solid #A26D14;
            border-bottom: 40px solid transparent;
        }


        /*平行四边形*/

        .parallelogram{
        	height:100px;
        	width:200px;
        	background:#13AD6D;
        	-webkit-transform:skew(-20deg);
        	        transform:skew(-20deg);
        }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <p>正方形</p>
            <div class="square"></div>
        </div>
        <div class="wrapper">
            <p>长方形</p>
            <div class="retangle"></div>
        </div>
        <div class="wrapper">
            <p>圆形</p>
            <div class="circle"></div>
        </div>
        <div class="wrapper">
            <p>半圆</p>
            <div class="semicircle"></div>
        </div>
        <div class="wrapper">
            <p>椭圆形</p>
            <div class="oval"></div>
        </div>
        <div class="wrapper">
            <p>三角形</p>
            <div class="triangle"></div>
        </div>
        <div class="wrapper">
            <p>梯形</p>
            <div class="trapezoid"></div>
        </div>
        <div class="wrapper">
            <p>菱形</p>
            <div class="diamond"></div>
        </div>
        <div class="wrapper">
            <p>月牙</p>
            <div class="moon"></div>
        </div>
        <div class="wrapper">
            <p>叶子</p>
            <div class="leaf"></div>
        </div>
        <div class="wrapper">
            <p>书签</p>
            <div class="bookmark"></div>
        </div>
        <div class="wrapper">
        	<p>平行四边形</p>
        	<div class="parallelogram"></div>
        </div>

    </body>

</html>