css 绘制图形

  1、绘制三角形

 用 css 画三角形主要是利用边框 border 来设置的,是不是有点迷惑?我们先试试把 div 四条边框设置成不同的颜色看看会出现什么效果:

  css 绘制图形

<head>
    <style>
        .triangle {
            width: 50px;
            height: 50px;
            border-bottom: 200px solid #ce7486;
            border-left: 200px solid #3898b1;
            border-right: 200px solid darkgoldenrod;
            border-top: 200px solid #8361c9;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

  可以看出边框是呈现一个三角形的趋势往内推,那么如果我们只想要一个向上趋势的三角形该怎么做呢?很简单,把盒子的宽高设为0,其它角度的边框颜色设置为透明就可以了,如下:

<head>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-bottom: 200px solid #ce7486;
            border-left: 200px solid transparent;
            border-right: 200px solid transparent;
            border-top: 200px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

    css 绘制图形

   还可以绘制直角三角形:

<style>
        .triangle {
            width: 0;
            height: 0;
            border-bottom: 200px solid #ce7486;
            border-left: 200px solid #ce7486;
            border-right: 200px solid transparent;
            border-top: 200px solid transparent;
        }
    </style>

    css 绘制图形

 

  2、绘制箭头

 利用边框加上旋转,我们设置两个相邻的边框,然后做 45 度的旋转,这样就可以得到不同类型的箭头了。

<head>
    <style>
        .triangle {
            width: 100px;
            height: 100px;
            border-left: 5px solid darksalmon;
            border-top: 5px solid darksalmon;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>

    css 绘制图形

  转 45 度:

<style>
        .triangle {
            width: 100px;
            height: 100px;
            border-left: 5px solid darksalmon;
            border-top: 5px solid darksalmon;
            transform: rotate(45deg);
        }
</style>

  css 绘制图形

 

  3、绘制圆

 绘制圆主要是使用 css3 的属性 border-radius

    css 绘制图形

<head>
    <style>
        .circle {
            width: 100px;//宽高要相等,否则是椭圆
            height: 100px;
            border-radius: 50%;
            background-color: #ce7486;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>

  绘制圆环:

    css 绘制图形

<style>
        .circle {
            width: 100px;
            height: 100px;
            border: 2px solid #ce7486;
            border-radius: 50%;
            background-color: white;
        }
</style>

 

  4、画一条 0.5px 的线

    直接设置 0.5px ,在不同的浏览器会有差异,谷歌浏览器直接把 0.5px 四舍五入变成了 1px.

 可以设置成 1px,再使用缩放功能。

<head>
    <style>
        .outline {
            height: 1px;
            background-color: black;
            transform: scaleY(0.5);
        }
    </style>
</head>
<body>
    <div class="outline"></div>
</body>

 

 

 

上一篇:刷题记录:[LCTF]bestphp's revenge


下一篇:.NET进阶篇04-Serialize序列化、加密解密