css实战之css画图

来源：互联网发布：支配集网络matlab算法编辑：程序博客网时间：2024/05/21 07:13

css实战之css画图

实际效果图

这里写图片描述

css3知识储备

transform为css3的属性，其主要有四种类型进行变形处理(这边暂时不考虑3d效果)：
1.旋转rotate
transform:rotate(45deg)
只有一个参数，正数表示顺时针旋转相应的度数，反之则为逆时针
2.缩放scale
transform:scale(0.5[,2])
当只有一个参数时表示：水平和垂直同时缩放的倍率
当有二个参数时表示：水平与垂直对应的缩放倍率
3.倾斜skew
transform:skew(20deg[,20deg])
当只有一个参数时表示：水平方向的倾斜角度
当有二个参数时表示：水平与垂直方向对应的倾斜角度
4.移动translate
transform:tanslate(45px[,45px])
当只有一个参数时表示：水平方向的移动距离
当有二个参数时表示：水平与垂直方向对应的移动距离

tansform可以多个方法组合进行变形

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">.Square{    width:100px;    height:100px;    background:#669;}.rectangle{    width:200px;    height:100px;    background:#669;}.trapezoid{    border-bottom:100px solid #669;    border-left:100px solid transparent;    border-right:100px solid transparent;    height:0;    width:100px;/*宽度设置的是里面的内容的宽度*/}.parallelogram{    width:100px;    height:100px;    background:#669;    transform:skew(30deg,10deg);    margin-left:50px;}.diamond{    width:100px;    height:100px;    background:#669;    transform:rotate(45deg);    margin-left:50px;}.upwardTriangle{    width:0px;    height:0px;    border-bottom:100px solid #669;    border-right:100px solid transparent;    border-left:100px solid transparent;}.leftTriangle{    width:0px;    height:0px;    border-bottom:100px solid transparent;    border-top:100px solid transparent;    border-left:100px solid #669;}.leftUpperTriangle{    width:0px;    height:0px;    border-bottom:100px solid transparent;    border-left:100px solid #669;}.updownTriangle{    width:0px;    height:0px;    border-bottom:100px solid #669;    border-right:50px solid transparent;    border-left:50px solid transparent;    position:relative;    margin-bottom:50px;}.updownTriangle:after{    content:" ";    width:0;     height:0;     border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:100px solid #669;    position:absolute;    top:50px;    left:-50px;}.fourBoard{    border-left:50px solid #060;    border-right:50px solid #600;    border-top:50px solid #00f;    border-bottom:50px solid #f00;    width:0px;    height:0px;}.circle{    width:100px;    height:100px;    background:#669;    border-radius:50px;}.circle-circle{    width:100px;    height:100px;    border:20px solid #669;    background:#fff;    border-radius:100px;}.circle-up{    width:100px;    height:0px;    border-top:100px solid #669;    border-right:100px solid #669;    border-radius:100px 100px 0 0;    /*        border-radius: 100px 100px 0 0;        等价于：        border-top-left-radius: 100px;        border-top-right-radius: 100px;        border-bottom-right-radius: 0;        border-bottom-left-radius: 0;    */}.circle-lefttop{    width:100px;    height:0;    border-top:100px solid #669;    border-radius:100px 0 0 0;}.tail-lefttop{    border:0 solid transparent;    border-top:30px solid #669;    border-radius:100px 0 0 0;    width:100px;    height:100px;}.pop{    width:200px;    height:100px;    border-radius:20px;    background:#669;    position:relative;}.pop:after{    content:"";    border:0 solid transparent;    border-bottom:30px solid #669;    border-radius:0 0 0 200px;    width:50px;    height:50px;    transform:rotate(-90deg);    margin-top:20px;    position:absolute;    top:50px;}.oval-pop{    width:200px;    height:100px;    border-radius:50px;    background:#669;    position:relative;}.oval-pop:after{    content:"";    border:0 solid transparent;    border-bottom:30px solid #669;    border-radius:0 0 0 200px;    width:50px;    height:50px;    transform:rotate(-90deg);    margin-top:20px;    position:absolute;    margin-top:50px;}</style></head><body><p>正方形</p><div class="Square"></div><p>长方形</p><div class="rectangle"></div><p>梯形</p><div class="trapezoid"></div><p>平行四边形</p><div class="parallelogram"></div><p>菱形</p><div class="diamond"></div><p>向上三角形</p><div class="upwardTriangle"></div><p>向左三角形</p><div class="leftTriangle"></div><p>左上三角形</p><div class="leftUpperTriangle"></div><p>上下三角形</p><div class="updownTriangle"></div><p>四巧板</p><div class="fourBoard"></div><p>圆形</p><div class="circle"></div><p>同心圆</p><div class="circle-circle"></div><p>上半圆</p><div class="circle-up"></div><p>四分之一圆</p><div class="circle-lefttop"></div><p>左上小尾巴</p><div class="tail-lefttop"></div><p>提示泡</p><div class="pop"></div><p style="margin-top:50px;">椭圆提示泡</p><div class="oval-pop"></div></body></html>

阅读全文

1 0