<head>
<meta charset="UTF-8"/>
<title>端午节快乐</title>
</head>
<style type="text/css">
*{margin: 0padding: 0}
div{width: 400pxheight: 400px color: red border: 5px cornflowerblue solidposition: fixedtop: 0overflow: hiddenborder-radius:50% column-count:6 column-gap: 30px
-webkit-column-gap:30px-webkit-column-count:6 font-size: 2em}
#a{color: chartreuse}
#b{ transform:rotate(45deg) -webkit-transform: rotate(45deg)}
#c{width:300pxheight: 300pxbackground:redborder-radius:50%position: fixedtop:50px left: 50px}
span{width:1pxheight:300pxposition: absolutetop:0left:150pxbackground:navajowhite}
.a{transform:rotate(60deg)-webkit-transform: rotate(60deg)background:darkmagenta}
.b{transform:rotate(90deg)-webkit-transform: rotate(90deg)background:turquoise}
.c{transform:rotate(120deg)-webkit-transform: rotate(120deg)background: yellow}
.d{transform:rotate(150deg)-webkit-transform: rotate(150deg)background: mistyrose}
.e{transform:rotate(180deg)-webkit-transform: rotate(180deg)background: greenyellow}
.f{transform:rotate(30deg)-webkit-transform: rotate(30deg)background:blue}
</style>
<body>
<div id="a" class="div">
端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐
</div>
<div id="b" class="div">
端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐
</div>
<div id="c">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
<span class="e"></span>
<span class="f"></span>
</div>
</body>
</html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>12等分圆</title>
</head>
<style type="text/css">
.container {
position: relative
width: 200px
height: 200px
overflow: hidden
border: 2px outset deeppink
border-radius: 50%
margin:5em auto
}
.layer {
position: absolute
transform-origin: left top
left: 100px
top: 100px
width: 100px
height: 100px
border: 1px solid white
box-sizing: border-box
}
</style>
<script type="text/javascript">
onload = function () {
[].slice.call(document.querySelectorAll('.layer'), 0).forEach(function (item, i) {
item.style.backgroundColor = '#' + (~~(Math.random() * (1 << 24))).toString(16)
item.style.transform = 'rotate(' + 360 / 12 * (i + 1) + 'deg)skewX(60deg)'
})
}
</script>
<body>
<div class="container">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
</div>
</body>
</html>
其中javascript部分可以改成css写，但是会写很多css，嫌麻烦所以用js控制了。
CSS画正方形长方形很简单，本文就不说了。
一、三角形
1、CSS画等腰三角形
2、画直角三角形：
二、画圆形
注意：border-radius是width/height的一半（50%）。
画半圆：
半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。
画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。
三、画椭圆
斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
四、平行四边形
margin-left是为了使得平行四边形可以全部在浏览器中显示出来
五、梯形
高度为0。有宽度没高度。
六、五边形、六边形
