CSS3 画基本图形，圆形、椭圆形、三角形等

发布时间：2016-09-20 16:25:53   作者：佚名   我要评论

这篇文章主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下

CSS3 圆形

#css3-circle{

width: 150px;

height: 150px;

border-radius: 50%;

background-color: #232323;}

CSS3 椭圆形

#css3-elipse{

width: 200px;

height: 100px;

border-radius: 50%;

background-color: #232323;}

CSS3 三角形

#css3-triangle{

width: 0;

height: 0;

border-left: 100px solid transparent;

border-right: 100px solid transparent;

border-bottom: 150px solid #232323;}

CSS3 平行四边形

#css3-parallelogram{

width: 200px;

height: 100px;

background: #232323;

-webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);

transform: skew(-45deg);

}

CSS3 梯形

#css3-trapezoid{

width: 100px;

height: 0;

border-bottom: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

CSS3 六角星

#css3-six-star{

width: 0;

height: 0;

position: relative;

border-bottom: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}#css3-six-star:after{

content: "";

width: 0;

height: 0;

position: absolute;

left: -50px;

top: 35px;

border-top: 100px solid #232323;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

CSS3 五角星

#css3-five-star{

width: 0px;

height: 0px;

margin: 50px 0;

position: relative;

display: block;

color: #232323;

border-right: 100px solid transparent;

border-bottom: 70px  solid #232323;

border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);

}#css3-five-star:before{

border-bottom: 80px solid #232323;;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -63px;

display: block;

content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);

}#css3-five-star:after{

position: absolute;

display: block;

color: #232323;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #232323;

border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);

content: '';

}

CSS3 五边形

#css3-pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: #232323 transparent;}#css3-pentagon:before {

content: "";

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #232323;}

CSS3 六边形

#css3-hexagon {

width: 100px;

height: 55px;

background: #232323;

position: relative;

}#css3-hexagon:before {

content: "";

position: absolute;

top: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #232323; }#css3-hexagon:after {

content: "";

position: absolute;

bottom: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #232323; }

CSS3 心形

#css3-heart {

position: relative;

width: 100px;

height: 90px;

}#css3-heart:before, #css3-heart:after{

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #232323;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);

transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%;

transform-origin: 0 100%;

}#css3-heart:after {

left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);

transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

CSS3 八卦

#css3-gossip {

width: 96px;

height: 48px;

background: #f1f1f1;

border-color: #232323;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}#css3-gossip:before{

content: "";

position: absolute;

top: 50%;

left: 0;

background: #f1f1f1;

border: 18px solid #232323;

border-radius: 100%;

width: 12px;

height: 12px;

}#css3-gossip:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: #232323;

border: 18px solid #f1f1f1;

border-radius:100%;

width: 12px;

height: 12px;

}

相关文章

这篇文章主要介绍了纯CSS3+DIV实现小三角形边框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-03

这篇文章主要介绍了详解css如何利用 :before :after 写小三角形的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-22

这篇文章主要介绍了用CSS3绘制三角形的简单方法,是CSS前端绘图的基础,需要的朋友可以参考下2015-07-17

图片的布局和排版非常重要，纯大部分网页或多或少都会用到图片。特别是对于图片较多的网页，今天要给大写带来一款纯css3实现图片三角形排列。适合一系列的图片，需要的朋友2014-10-17

今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解2013-01-06

这篇文章主要介绍了CSS3实现三角形不断放大效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-13

最新评论

html5实现圆圈里带一个三角形,CSS3 画基本图形，圆形、椭圆形、三角形等相关推荐

  1. html5实现圆圈里带一个三角形,Fabric.js - 详细使用教程1（绘制图形：矩形、圆形、三角形、不规则图形）...

    一.绘制图形 1,绘制矩形 下面代码在画布上绘制一个红色圆角矩形,并带有橙色边框. canvas { border: 1px dashed black; } window.onload = funct ...

  2. html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆，三角形，椭圆)c

    看到一些网站的椭圆边框是用css样式写出来得,请问怎样写? 首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签: 怎么把DIV做成椭圆形,CSS,最好有代码 参见下面样式 ...

  3. html5实现圆圈里带一个三角形,HTML5 Canvas圆圈里面的三角形变换动画

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, cw, ch; var particles = [], grid = [] ...

  4. css3画一个三角形,css3 画三角形

    /*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...

  5. 用java的事件监听机制实现一个简单的画板应用：通过选择图形按钮和颜色按钮来画出自己想画的图形：直线、空心矩形、圆形、折线、多边形、圆角矩形、弧线、曲线、喷枪

    今天做一个简单的画板,完整代码附在文章末尾处. - 功能:通过选择图形按钮和颜色按钮来画出自己想画的图形. - 界面展示: - 思路: 1.做一个可视化界面:创建JFrame对象,并设置Title.S ...

  6. php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...

    我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

  7. h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...

    我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

  8. HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像

    用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...

  9. 百度前端笔试题 css3画三角形

    昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块.其中有一道用css实现的布局问题,是在一个大矩 ...

  10. 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。

    今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...

最新文章

  1. 【模型评估与选择】sklearn.model_selection.KFold
  2. 给array添加元素_前囧（06篇）Array 方法详解
  3. CF573D-Bear and Cavalry【动态dp】
  4. 计算特征矩阵及哈希值（含OpenCV代码）
  5. CentOS7救援模式以及救援模式的网络配置
  6. 立flag（java）
  7. 关于QT 报错Error: Class declaration lacks Q_OBJECT macro.
  8. window.open无法打开新窗口
  9. 2021 年第一次做核酸检测是什么体验
  10. linux查看当前网卡网速,Linux环境编程：获取网卡的实时网速
  11. 在若依项目中添加导入excel功能
  12. 80后男人的脱单技巧
  13. 上传并下载excel表格
  14. U74LVC1G07G-SOT353R-TG
  15. 思维导图在线制作，好用的思维导图软件分享
  16. win10Oracle繁体乱码,win10系统切换繁简字体出现乱码的解决方法
  17. 数据异常检测方法以及实际应用
  18. Android数据库处理重复插入Insert数据的问题
  19. 信息系统项目管理师学习笔记11-项目风险管理
  20. 华为鸿蒙背后：中国首个自己的开源基金会来了！

热门文章

  1. OKALEIDO解决NFT流动性不足难题，更有创新平台通证分配方案
  2. 办公室自动化铵计算机,办公自动化介绍471821361.doc
  3. Dota Allstars 6.67/6.67b/6.67c bug小鸡臂章
  4. 在vue3(vite+ts)中使用shiki实现代码语法高亮渲染
  5. 聚合数据Android SDK 12306火车票查询订票演示示例 编辑
  6. ELK Stack学习笔记
  7. Revit模型文字破损乱码处理方案
  8. 8088单板机ROM固件Boot烧写步骤（二）
  9. 【IQ题】三人行 组合问题
  10. 数据解读广大“钢铁直男”眼中的女神评判标准（文末有彩蛋）