css实现基础几何图形

时间：2015-08-20 01:16:34 阅读：365 评论：0 收藏：0 [点我收藏+]

标签：

　　我们知道，css3通过border-radius、animation、transform等“新”特性可以绘制很多精致的图形。比如腾讯企鹅Logo、超能陆战队中的大白机器人、太阳系、小黄人、叮当猫、安卓机器人、苹果图标等等。

　　这些图形看似实现起来挺复杂，但它们通常都是由矩形、圆形、椭圆、三角、梯形等基本图形组合而成的。所以我们先从基本图形入手，等熟悉之后，实现复杂图形就成为可能了。

　　首先从矩形开始，一个具有宽高属性的元素，设置其宽高值、块状显示，即得到一个矩形。

　　在矩形的基础上通过设置border-radius，可以得到圆角矩形、圆形（当矩形为正方形且四个角的border-radius设为正方形宽度的一半时）和椭圆（当矩形的四个角的border-radius设为50%时）。

　　下面实现三角形。我们看border属性，当有相邻border时，相邻border相接的部分是矩形的直角，为了形成一个直角，相邻border各贡献一个直角三角形，组成了矩形的直角，而这个直角三角形的直角边边长就是border的宽度。所以我们只要将其中一个border颜色设为transparent或当前背景色，视觉效果就是一个三角形了。见代码：

#div_RightAngle1{ //直角三角形1
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-top-color:#abc;
    border-right-color:#abc;
    border-bottom-color:#fff;
    border-left-color:#fff;
}
#div_RightAngle2{ //直角三角形2
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-color:#fff;
    border-top-color:#abc;
}
#div_anyAngle{ //任意三角形
    width:0;
    height:0;
    border-left:25px solid #fff;
    border-right:25px solid #fff;
    border-bottom: 50px solid #abc;

}

技术分享

下面我们结合border与transform实现一个有趣的弯曲箭头，效果图是这样的：技术分享。先构造一个直角三角形div，通过transform旋转一定角度，然后使用after伪类通过圆角制造一个弯曲效果。见代码：

#divArrow{ //弯曲箭头
    position: relative;
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-right:9px solid red;
    transform:rotate(10deg);
}
#divArrow:after{
    position:absolute;
    content:"";
    border-top:3px solid red;
    border-radius:15px 0 0 0;
    top:-12px;
    left:-9px;
    width:12px;
    height:12px;
    transform:rotate(45deg);
}

接下来实现梯形。前面我们已经知道通过设置宽高均为0、三边有边框且其中一边有可见色的方式可以构建出一个直角三角形，那么我们让元素具有宽度，就可以把相邻的边框给撑开，这样元素内部就形成一个矩形了，如此，梯形就构建出来了，见代码：

#div_Trapezoid{
    width:25px;
    height:0;
    border-bottom:50px solid #abc;
    border-left:50px solid #fff;
    border-right:50px solid #fff;
}

技术分享

实现弯曲箭头的时候我们用到了transform，通过它我们也可以实现平行四边形，见代码：

#div_Parallelogram{
    width:200px;
    height:100px;
    transform:skew(30deg);
}

技术分享

正方形通过旋转45度可以实现菱形，同样，我们也可以用实现三角形的思想来实现（用两个直角三角形拼起来）：

#diamond1{
    width:20px;
    height:20px;
    transform:rotate(45deg);
}
#diamond2{
    width:0;
    height:0;
    border: 25px solid #fff;
    border-bottom-color:#abc;
    position:relative;
}
#diamond2:after{
    position: absolute;
    content:"";
    left:-25px;
    top:25px;
    width:0;
    height:0;
    border: 25px solid #fff;
    border-top-color:#abc;

}

技术分享

接下来，我们对菱形进行变形，实现一个盾牌效果：

#diamond_Shield{
    width:0;
    height:0;
    border:50px solid #fff;
    border-bottom: 20px solid #abc;
    position:relative;
}
#diamond_Shield:after{
    position: absolute;
    content:"";
    top:20px;
    left:-50px;
    width:0;
    height:0;
    border:50px solid #fff;
    border-top: 70px solid #abc;
}

技术分享

接下来在菱形和梯形的基础上实现钻石形状：

#diamond3{
    width:50px;
    height:0;
    position: relative;
    border-style: solid;
    border-color:#fff #fff #abc #fff;
    border-width: 0 25px 25px 25px;
}
#diamond3:after{
    position: absolute;
    content:"";
    top:25px;
    left:-25px;
    width:0;
    height:0;
    border-style: solid;
    border-color: #abc #fff #fff #fff;
    border-width: 70px 50px 0 50px;
}

技术分享

实现一个小房子：

#house{
    background-color: #abc;
    height:55px;
    width:100px;
    position:relative;
}
#house:before{
    content:"";
    position:absolute;
    height:0;
    width:0;
    left:0;
    top:-35px;
    border-bottom: 35px solid #abc;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
}

技术分享

在三角形的基础上，我们让其中一边成弧形，就形成一个扇形了：

#cone{
    background-color: #fff;
    width:0;
    height:0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid #abc;
    border-radius:50%;
}

技术分享

如果我们想要实现一个月牙形呢？因为月牙是由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，所以我们在圆的基础上让圆有一个阴影就能实现了：

#moon{
    background-color: #fff;
    width:80px;
    height:80px;
    border-radius:50%;
    box-shadow: 15px 15px 0 0 #abc;
}

技术分享

三角形和梯形可以拼成一个五边形，下面我们来实现之：

#pentagon{
    background-color: #fff;
    position: relative;
    width:54px;
    border-width: 50px 18px 0;
    border-style:soild;
    border-color: #abc transparent;
}
#pentagon:after{
    content:"";
    position:absolute;
    height:0;
    width:0;
    top: -85px;
    left:-18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #abc;
}

技术分享

六边形可以用两个三角形和一个矩形拼成、八边形可以用两个梯形和一个矩形拼成，还有五角星可以用两个梯形加一个三角形通过旋转组合实现，这里就不演示了。

明天是七夕，最后我们实现一个心形吧，愿天下有情人终成眷属：

#heart{
    width:0;
    height:0;
    position:relative;
}
#heart:before,#heart:after{
    position: absolute;
    content:"";
    left:50px;
    top:0;
    width: 50px;
    height:80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
#heart:after{
    left:0;
    transform:rotate(45deg);
    transform-origin:100% 100%;
}

技术分享

（因为只是演示，所以以上样式均没加浏览器厂商前缀）

通过这些基本图形的实现，以后实现复杂图形就有一定的可能性了。

css实现基础几何图形

标签：

原文地址：http://www.cnblogs.com/w3cape/p/4743786.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行