当前位置: 萬仟网 > IT编程>网页制作>CSS > css实现多种图形的代码教程

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

2018年01月27日 02:30  | 萬仟网IT编程  | 我要评论

1.实现双三角形

这里写图片描述

实现原理:使用两个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.实现平行四边形

这里写图片描述

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

3.实现等腰梯形

这里写图片描述

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

4.实现五边形

这里写图片描述

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

实现上半部分
#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;
}

这里写图片描述

5.实现半圆

这里写图片描述

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

6:实现扇形

这里写图片描述

 #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;
        }

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • Web前端——Html常用标签及属性

    html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面... [阅读全文]
  • 如何成为一名优秀的web前端工程师

    如何成为一名优秀的web前端工程师

    何为:前端工程师? 前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。 Web前端开发技术主要包括三个要素:HTML、CSS... [阅读全文]
  • <img>标签--基础标签

    [2019.06.22 学习笔记1] 1.<img>图片标签,自闭合标签 2.必要属性src,src="图片地址" ... [阅读全文]
  • DTD文档模型是什么

    [2019.06.22 学习笔记3] 1.DTD文档模型是DOCTYPE文档声明,是Doucument Type Definition的英文缩写,是... [阅读全文]
  • Web前端——css

    Web前端——css

    css 推荐的样式编写顺序: 1. Positioning:定位 2. Box model:盒子模型、大小等 3. Typographic:文字系列... [阅读全文]
  • 博客园美化主题需要这几步

    博客园美化主题需要这几步

    博客园美化主题需要这几步 本人现用的这套博皮是根据bndong的博客进行修改的,且配置需要时间,有兴趣可以直接访问bndong博客,查看置顶博文进行... [阅读全文]
  • iconfont采坑

    iconfont采坑

    1. iconfont采坑 1.1. 前言 1. 使用iconfont过程中踩过坑特此记录 2. 不知道iconfont的这里也简单介绍一笔,阿里开... [阅读全文]
  • css网页布局模板

    效果如图: 菜鸟教程(runoob.com) 我的网页 重置浏览器大小查看效果。 我的网页 重置浏览器大小查看效果。 链接 链接 链接 链接 文章标... [阅读全文]
  • css基础4

    今天是2019年6月21日,周五了。在这里写上一篇随笔,主要内容是css基础中的一些细节部分,话不多说,直接上! 一、背景渐变: backgroun... [阅读全文]
  • CSS filter 属性

    CSS filter 属性

    filter 将模糊或者颜色偏移等图像效果用于元素,通常用于调整图像,背景和边框的渲染 css 标准中已内置一些预定义效果的函数,也可通过url使用... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com