用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 这两个工具,功能很强大,可以自行了解;


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

查看所有标签

猜你喜欢:

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

世界是数字的

世界是数字的

[美] Brian W. Kernighan / 李松峰、徐建刚 / 人民邮电出版社 / 2013-6 / 49.00

家用电器、汽车、飞机、相机、手机、GPS 导航仪,还有游戏机,虽然你看不见,但这些设备都有计算能力。手机通信网络、有线电视网络、空中交通管制系统、电力系统、银行和金融服务系统等基础设施背后无一不是计算机在支撑。如今的世界是数字的,而计算机和计算无处不在。这本书就是要告诉大家数字世界有关计算机的一切。本书没有高深莫测的专业术语,但它全面解释了当今计算和通信领域的工作方式,包括硬件、软件、互联网、通信......一起来看看 《世界是数字的》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具