css三角形 | 易学教程

css绘制三角形

阅读更多关于 css绘制三角形

　　今天，偶遇一个css绘制三角形的代码，用处很大哦，分享给大家，送上代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 .parent{ 8 width: 300px; 9 height: 100px; 10 margin: 10px auto; 11 background-color: green; 12 } 13 .square{ 14 width: 0; 15 height: 0; 16 border-bottom: 15px solid white; 17 border-left: 15px solid white; 18 border-right: 15px solid green; 19 border-top: 15px solid green; 20 position: relative; 21 left: -30px; 22 top: 20px; 23 } 24 </style> 25 </head> 26 <div class="parent"> 27 <div class="square"></div> 28 </div> 2 1 <!DOCTYPE html> 2

css 画圆形和三角形

阅读更多关于 css 画圆形和三角形

文章目录文章参考圆形三角形文章参考纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）圆形原理描述：设置div的高度和宽度是一致的，画出正方形然后再利用border-radius转为圆形由于块状元素是占一行，因此将元素改为 inline-block < span class = " point " style =" background : #77DC7E ; margin-right : 12px ; " > </ span > .point { width : 12px ; height : 12px ; border-radius : 12px ; display : inline-block ; background : red ; } 由于要设置高度和宽度，因此就需要将元素改为 inline-block 三角形原理描述：一个div的边框实际上是有上、下、左、右四个边框构成，每个边框代表一个小的等边直角三角形将等边直角三角形拼成我们感兴趣图片将其余的边框改为透明即可四个边框如果只设置其中一个边框或者两个边框，浏览器会显示不同的形状，因此要根据浏览器的实际显示为准，如果不确定就按照上面四个边框来拼凑，其他的改为透明即可 < div class = " reception-flag " > </ div > .reception

用css画出三角形

阅读更多关于用css画出三角形

看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。这个时候如果将盒模型内部的height，width调为0px，则三角形就形成了。 1 border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句 2 border-width:15px;　　　　　　　　//border-width代表所有方向的border 3 border-style:solid; 4 border-color:transparent；如果你看明白了原理那么现在你应该已经可以自己写出代码了。 1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色 4 border-right: 50px solid transparent;　　　　//右边同上 5 border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

纯CSS绘制三角形（各种角度）

阅读更多关于纯CSS绘制三角形（各种角度）

纯CSS绘制三角形（各种角度） CSS三角形绘制方法，学会了这个，其它的也就简单。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法复制代码代码如下: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 复制代码代码如下: #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } 复制代码代码如下: #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border

纯CSS实现聊天框气泡效果(一)

阅读更多关于纯CSS实现聊天框气泡效果(一)

CSS气泡实现过程 <div class="arrow"></div> <style type="text/css"> .arrow { width:0; height:0; font-size:0; border:solid 10px #000; } </style> 我们可以得到一个黑色的正方形，其实这是边框组成的，因为div的宽度和高度都是0。那么，我们具体来看看，div宽度和高度都是0时，它的上下左右四边框都是怎样的，下面我们把边框的各边框的各边颜色分别设置为不同颜色： <div class="arrow"></div> <style type="text/css"> .arrow{ width:0; height:0; font-size:0; border:solid 10px; border-color:#ff0 #0f0 #00f #000; } </style> 我们发现，原来当div的宽度和高度都是0的时候，它的整个边框是由四个三角形组成的，每一边为一个三角形，那么我们就可以利用这个特点，来做小尖角，我们只要把不需要的三边的边框颜色设置为与背景相同即可，这样只要能看到你想要的那个三角形了，然后再利用定位调整一下位置就可以了。代码如下： <!DOCTYPE html> <html> <head> <style> body { background:#fff; }

纯CSS实现单一div的正多边形变换

阅读更多关于纯CSS实现单一div的正多边形变换

纯粹利用CSS，让“单一个”div，从正三角形变换为正八边形（单一div最多只能做到正八边形），最后再搭配动画的效果，变成正多边形的变换动画，也由于正多边形需要用到不少的三角函数计算，为了方便起见，这里将正多边形的边统一都设为100px。正三角形正三角形不需要用到伪元素，只需要设定div本身的边框宽度即可产生，先来看一下正三角形的边长与中线，若边长为100px，则中线四舍五入就是87px（100 x sin（60）= 87）。因此我们要将div的长宽都设为0，接着把底部border的宽度设为87px，左右的border宽度设为50px（颜色设为透明transparent），就可以做出一个漂亮的三角形。 width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color:transparent transparent #095; web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（从零基础开始到前端项目实战教程，学习工具，职业规划）正方形正方形应该是最简单的，只要设定长宽设定为同样数值就可以了，不过其实还有另外两种方法，第一种你可以把长宽设为0，把上下左右的border设为50px也可以，第二种则是高度设为0

CSS利用border绘制图性

阅读更多关于 CSS利用border绘制图性

绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; 绘制三角形： width:0px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; 绘制直角三角形： width:0px; border-top:20px solid red; border-right:0px solid transparent; border-left:10px solid transparent; border-bottom:10px solid transparent; 来源： https://www.cnblogs.com/planetwithpig/p/11974058.html

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

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

图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦。其中绝大部分涉及到CSS3中的border-radius，text-shadow， transform 等一些比较复杂的属性，所以需要有一点CSS3基础的最好。特别注意的是此效果不兼容IE<9的浏览器，最好用firefox，chrome等浏览器。以下案例都由本人亲自测试，希望好学您也可以一一测试一下。 1.正方形正方形 1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2.长方形长方形 1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3.圆形圆形 1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;6 -webkit-border-radius: 50px;7 border-radius: 50px;8 } 4.椭圆椭圆 1 #oval {2 width: 200px;3 height: 100px;4 background: red;5 -moz-border-radius: 100px / 50px

CSS 巧用 :before和:after

阅读更多关于 CSS 巧用 :before和:after

前几天的晚上较全面的去看了下css的一些文档和资料，大部分的样式运用都没什么大问题了，只是有些许较陌生，但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。什么是:before和:after？该如何使用他们？ :before是css中的一种伪元素，可用于在某个元素之前插入某些内容。 :after是css中的一种伪元素，可用于在某个元素之后插入某些内容。下面我们先跑个简单的代码测试下效果： <style> p:before{ content: "H" /*:before和:after必带技能，重要性为满5颗星*/ } p:after{ content: "d" /*:before和:after必带技能，重要性为满5颗星*/ } </style> <p>ello Worl</p> 以上的代码将会在页面中展现的是”Hello World”。我们通过浏览器的”审查元素”看到的内容是： <p> ::before "ello Worl" ::after </p> p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是”H”；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是”d”。作为一只合格的程序猴子，捍卫”Hello World

20 个 CSS 高级技巧汇总

阅读更多关于 20 个 CSS 高级技巧汇总

1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);} 2. 使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */.nav li { border-right: 1px solid #666;} ……然后再除去最后一个元素…… // remove border /.nav li:last-child { border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) { border-right: 1px solid #666;} 这样代码就干净，易读，易于理解了。当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： ..nav li:first-child ~ li { border-left: 1px solid #666;} 3. 页面顶部阴影下面这个简单的 CSS3

订阅 css三角形