h5中css利用div画简易多边形

目录

  • 三角形
  • 梯形

三角形


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图title>
    <style type="text/css">
    .triangle {
        width: 0;
        height: 0;
        /*个人习惯设置宽高,设不设置不影响效果*/
        border: 100px solid transparent;
        /*设置边框的像素,类型,并设置颜色为transparent透明。此时从页面上时看不到任何东西的*/
        border-left-color: #acf;
        /*设置左边框的颜色,因为上面设置的全透明,此时只能见到设置了颜色的一边,便是一个三角形*/
    }
style>
head>
<body>
    <div class="triangle">div>
body>
html>

效果如图

h5中css利用div画简易多边形_第1张图片
注:此方法中,border-left-color中的方向决定的三角形底的朝向。


梯形

方法1


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图title>
    <style type="text/css">
    .triangle {
        width: 0;
        height: 80px;
        border: 100px solid transparent;
        border-left-color: #acf;
    }
style>
head>
<body>
    <div class="triangle">div>
body>
html>

是不是很眼熟,这和三角形的区别只有一个高的区别,但却能达到如图梯形效果。
h5中css利用div画简易多边形_第2张图片
但是这种方法需要注意几点

  1. 梯形的下底长度=边框像素+你所设置的高度或宽度(上底的长度)
  2. 当三角形的底是左右时,使其变为梯形是调整height。上下则调width。
  3. 此方法画出的梯形很笨拙,除了是想画个纯粹的梯形,一般不推荐使用此方法。

方法2
梯形由三个三角形组成,因为div是块级元素,所以要使其变为行级元素,这里我们要用到display: inline-block;
因为三个div的实质还是三个矩形,即使都变成了行级元素也不能贴合到一起,所以还要用到position:absolute绝对定位,定位方法w3c中有详细介绍。
这个方法较为繁琐,但是相较方法一更加灵活,能画出等腰梯形,直角梯形是一个三角形加一个矩形。

参照上面的方法,我们还可以利用其画出六边形。
(这些方法是本人所掌握的一些方法,若有错误或更简单的方法,还望大神指点)

你可能感兴趣的:(多边形画法)