【纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)】的更多相关文章

纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)

1.圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 2.椭圆 .oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 3.上三角 .triangle-up { width:; height:; border-left: 50px solid transparent; b…

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果:   CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red;…

纯CSS画的基本图形

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果:   CSS代码如下:   代码如下: #square { width: 100px; height: 100px; background: red; }…

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦

http://css-tricks.com/examples/ShapesOfCSS/…

用纯css画个三角形

用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用纯c…

纯css画三角形

纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100px; border-color: red forestgreen blue cyan; 去掉width和height border-style: solid; border-width: 100px; border-color: red forestgreen blue cyan; 设置区域三个bo…

用CSS画一个带阴影的三角形的示例代码

1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可 通过 transform 旋转盒子 方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言) 2. 设计 2.1 边框法 html结构 ? 1 2 3 <bod…

【原创】纯CSS画黄金梅丽号！

代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>黄金梅丽号…

用纯CSS画大白

纯CSS打造网页大白知识点:      首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger,r-bigfinger,l-smallfinger,r-smallfinger,l-leg,r-leg. 因为大白是白色,所以背景颜色(body)要设为深色. 大白居中,div居中要用margin:0  auto: 保险起见overflow:hidden 首先写head: 设置宽高之后以百分比定…

理解纯CSS画三角形

pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .text_intent { text-indent: 38px } .d1 { width: 200px; height: 200px; border-top: 10px solid yellow; border-left: 10px solid purple; border-bottom: 10px…