css实战之css画图

最新推荐文章于 2025-04-27 09:30:00 发布

原创最新推荐文章于 2025-04-27 09:30:00 发布 · 887 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #web前端

web前端同时被 3 个专栏收录

99 篇文章

订阅专栏

css

12 篇文章

订阅专栏

小应用

7 篇文章

订阅专栏

这篇博客探讨了如何使用CSS3的transform属性来实现图形的旋转、缩放、倾斜和移动。通过实例展示了transform的rotate、scale、skew和translate四种基本类型的用法，这些变形操作可以组合应用，创造出复杂的视觉效果。

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>