欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css实现多种图形的代码教程

程序员文章站 2022-04-04 18:05:31
1.实现双三角形 实现原理:使用两个p元素,设置宽高都为0。通过设置border值和颜色还实现。 p{ width:0; height:0;...

1.实现双三角形

css实现多种图形的代码教程

实现原理:使用两个p元素,设置宽高都为0。通过设置border值和颜色还实现。

p{
    width:0;
    height:0;
    //注意这里不能设置border-left,因为设置了会让这两个三角形分开
    border-right:20px royalblue solid;
    border-top:10px transparent solid;
    border-bottom:10px transparent solid;
    float:left;//因为块级元素独占一行
}

2.实现平行四边形

css实现多种图形的代码教程

p{
    width:100px;
    height:100px;
    background-color:#489ddf;
    transform:skew(160deg); //倾斜函数
    margin-left:100px;//因为元素倾斜后会发现元素会跑出body
}

3.实现等腰梯形

css实现多种图形的代码教程

p{
            width: 200px;
            height: 200px;
            border-width: 80px;
            border-color: #489ddf white;
            border-style: solid;
        }

4.实现五边形

css实现多种图形的代码教程

我们可以将五边形分成上半部分的等腰梯形和下半部分的三角形。只要分别实现这两个模块就可以达到最终效果啦!

实现上半部分
#p1{
    width:100px;
    height:100px;
    border-bottom:50px red solid; //注意border的宽度
    border-top:50px white solid;
    border-left:50px white solid;
    border-right:50px white solid;
}
下半部分
#p2{
    width:0;
    height:0;
    border-top:100px black solid;
    border-bottom:100px red solid;
    border-left:100px white solid;
    border-right:100px white solid;
}

css实现多种图形的代码教程

5.实现半圆

css实现多种图形的代码教程

p{
    width:100px;
    height:50px;
    background-clolr:#489ddf;
    border-radius:50px 50px 0 0;
}

6:实现扇形

css实现多种图形的代码教程

 #p1{
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            background-color: #489ddf;
        }
  #p2{
           width: 0;
           height: 0;
           border-top: 80px #489ddf solid;
           border-right: 50px transparent solid;
           border-left: 50px transparent solid;
        }