用CSS画一些多边形状

栏目: CSS · 发布时间: 5年前

内容简介：CSS是个很强大的网页开发工具，使生硬的网页变得丰富绚丽，css能实现很多效果，比如css3中的过渡与动画效果都很好看，最基本的就是画一个具有长宽的矩形，通过设置下面根据几何顺序依次来实现一下：在长宽相等的正方形中使用

CSS是个很强大的网页开发工具，使生硬的网页变得丰富绚丽，css能实现很多效果，比如css3中的过渡与动画效果都很好看，最基本的就是画一个具有长宽的矩形，通过设置 border-radius 又能实现画圆形和椭圆形，但是其他多边形似乎没有直接能用的属性，比如 三角形 ， 五角星 ， 六边形 等等；

下面根据几何顺序依次来实现一下：

圆形

分析:

在长宽相等的正方形中使用 border-radius 属性，其值等于长或宽的一半；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 40px;
            height: 40px;
            background: red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

椭圆形

分析

同样是 border-radius 属性，只不过其值有变化，使用 border-radius: 30px/20px ，意思是原矩形宽度方向半径设为 30px，高度方向半径设为 20px，或者简写为 boder-radius: 50% ，一个意思，宽度和高度方向的半径各位宽度和高度的一半；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 40px;
            height: 40px;
            background: red;
            border-radius: 30px / 20px;
            /* 或者这样
            border-radius: 50%;
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三边形

分析

没有直接能用的三角形的属性，可以利用CSS的 盒子模型 ，就是下面这种，像 <p>, <h1>, <div> 这些标签都是一个“盒子”，标签内的文本是内容区，周围的彩色边界设置的是 border 值，当然还有边界与内容区中间的 padding 值，以及边界外的 margin 值；

内容

所以由图就能想到办法了，就是让某一条边界的宽度值直接等于盒子的宽度，并设置一个边界颜色，其他边界线设置不同的宽度值来调整三角形的斜度，并把边界线颜色设置为透明 transparent 即可；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width:30px;
            height:40px;
            border-left:20px solid transparent;
            border-right:20px solid transparent;
            border-bottom:40px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

矩形

最简单的形状，就不分析了；

梯形

分析

方法有些像三角形，只不过底部边界线宽度等于矩形高度，左右两边的边界线宽度小于矩形宽度值即可（感觉这两句话绕就比划着再读几遍 -_-）;

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 60px;
            height: 40px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 40px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

平行四边形

分析

看成一个倾斜过的矩形，所以可以使用 transform: skew() 属性，括号内是倾斜角度，比如30度就是 30deg ，还有 transform 是CSS3中的一个新属性，所以需要加浏览器前缀进行兼容，例如：

div {
    transform: skew(30deg);
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -o-transform: skew(30deg);
}

另外脑洞够大可以发挥一下想象，平行四边形可以看成一个直角梯形与一个直角三角形的组合，或者一个矩形与两个直角三角形的组合；

直角梯形与直角三角形组合的代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            display: inline-block;
            width: 60px;
            height: 40px;
            border-left: 10px solid transparent;
            border-bottom: 40px solid red;
        }
        #div1 {
            display: inline-block;
            width: 10px;
            height: 40px;
            border-left: 10px solid red;
            border-bottom: 40px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div><!--
    --><div id="div1"></div>
</body>
</html>

注意：两个 <div> 标签之间如果有换行或者空格的话，最终两个块图形间会出现一条细缝，所以写的时候就要避免换行，或者像上面一样把换行 注释掉 ；

五边形

分析

五边形可以看成上面的三角形与下面梯形的组合，当然数学好的可以计算一下尺寸就能画出一个正五边形了；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 50px;
            height: 10px;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 10px solid red;
        }
        #div1 {
            width: 50px;
            height: 40px;
            border-top: 40px solid red;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1"></div>
</body>
</html>

更多边的形状基本思路都一样，想着用三角形，矩形，梯形这些基本形象进行组合基本上都能实现，下面的形状就只放形状和源码了；

五角星

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 40px;
            height: 60px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 60px solid red;
        }
        #div1 {
            height: 20px;  
        }
        #div2 {
            width: 60px;
            height: 18px;
            border-top: 25px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            margin-left: -30px;
        }
        #div3 {
            width: 40px;
            height: 15px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 15px solid white;
            margin-left: -20px;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

六边形

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 60px;
            height: 30px;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 30px solid red;
        }
        #div1 {
            width: 60px;
            height: 30px;
            border-top: 30px solid red;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1"></div>
</body>
</html>

当然网页上画像上面这种基本图形，或者跟复杂的几何图形，曲线图形等，多半用到 canvas 或者 SVG 这两个工具，功能很强大，可以自行了解；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

RESTful Web Services Cookbook

Subbu Allamaraju / Yahoo Press / 2010-3-11 / USD 39.99

While the REST design philosophy has captured the imagination of web and enterprise developers alike, using this approach to develop real web services is no picnic. This cookbook includes more than 10......一起来看看《RESTful Web Services Cookbook》这本书的介绍吧!

码农工具

用CSS画一些多边形状

圆形

分析:

椭圆形

分析

三边形

分析

矩形

梯形

分析

平行四边形

分析

五边形

五角星

六边形

RESTful Web Services Cookbook

JSON 在线解析

Base64 编码/解码

HEX CMYK 转换工具