CSS 绘制特殊图形

作者: Junting | 来源:发表于2018-05-16 11:59 被阅读0次

CSS 绘制特殊图形
CSS 绘制特殊图形
mxgraph
CSS简单绘制特殊图形和布局
css 图形绘制
css图形绘制合集（纯CSS外加一个div标签实现）
CSS3绘制图形基本原理
CSS-绘制各种基本图形
css绘制的图形
css绘制各种图形

先来绘制一个简单基础容器

<!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>CSS 绘制特殊图形</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: orange;
            border: 30px solid;
            border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: salmon;
            border-top-color: greenyellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

示例1

示例2

从示例1 和示例2（通过把示例1的宽高设置为0得到）可以看出，容器的 border 是由三角形组成，由此可以得知在绘制一些特殊图形时可以通过控制 border来进行特殊图形的绘制，比如：等腰三角形、直角三角形、梯形...

得到一个等腰三角形：

    <style>
        div {
            width: 0px;
            height: 0px;
            background: transparent;
            border: 30px solid;
            /* 通过控制各边框的颜色 */
            border-left-color: transparent;
            border-bottom-color: gray;
            border-right-color: transparent;
            border-top-color: transparent;
        }
    </style>

等腰三角形

从此控制边框颜色，我们可以得到以下各种图形：

image.png

 <style>
        div {
            float: left;
            margin: 30px 30px;
            width: 300px;
            height: 300px;
            background: orange;
            border: 30px solid;
            /* 通过控制各边框的颜色 */
            /* border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: salmon;
            border-top-color: greenyellow; */
        }
        /* 沙漏 */
        .div1 {
            width: 0;
            height: 0;
            background: transparent;
            border: 30px solid;
            border-left-color: transparent;
            border-bottom-color: gray;
            border-right-color: transparent;
            border-top-color: greenyellow;
        }
         /* 书签 */
        .div2 {
            width: 0;
            height: 0;
            background: transparent;
            border: 30px solid;
            border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: transparent;
            border-top-color: greenyellow;
        }

         /* 等腰直角三角形 */
        .div3 {
            width: 0;
            height: 0;
            background: transparent;
            border: 30px solid;
            border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: transparent;
            border-top-color: transparent;
        }
       /* 书签 */
       .div4 {
            width: 0;
            height: 0;
            background: transparent;
            border: 30px solid;
            border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: salmon;
            border-top-color: greenyellow;
        }
        /* 超人热裤 */
        .div5 {
            width: 0;
            height: 10px;
            background: transparent;
            border: 30px solid;
            border-bottom: 0;
            border-left-color: gold;
            border-bottom-color: gray;
            border-right-color: salmon;
            border-top-color: greenyellow;
        }
        /* 梯形 */
        .div6 {
            width: 20px;
            height: 0px;
            background: transparent;
            border: 30px solid;
            border-left-color: transparent;
            border-bottom-color: gray;
            border-right-color: transparent;
            border-top-color: transparent;
        }
 </style>

从上可以看出，通过控制容器边框和宽高，可以绘制出各种特殊图形。

接下来，我们来绘制各种圆形相关图形：

image.png

圆形

<style>
        /* 圆形 */
        .div7 {
            width: 100px;
            height: 100px;
            border: 0;
            border-radius: 50%;
        }
</style>

椭圆形

绘制椭圆边框圆弧需要符合宽高各一半的原则。

绘制椭圆

<style>
        /* 椭圆 */
        .div8 {
            width: 100px;
            height: 80px;
            border: 0;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
</style>