【利用css的border实现画三角形思路原理】的更多相关文章

利用css的border实现画三角形思路原理

1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较大的border相交时: 1.只有相邻边才会相交,对边是不可能相交的 2.相交区域(显然是矩形)按对角线划分成两个三角形,两个三角形分别渲染成两个边的颜色,颜色不会出现重叠的情况 3.调整四个边的宽度,加上中间区域的宽度,配以不同颜色和透明,各种简单多边形(举一反三)已经不在话下了 <html>&…

css趣味案例：画三角形

代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画三角形</title> <style> #trip{ width:0px; height:0px; border-top:50px solid white; border-right:50px solid white; border-bot…

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了…

如果用css的border属性画一个三角形

假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid green; border-left: 20px solid transparent;}我们通过border-top,border-bottom来撑起三角形的昨天那条线一定要记得设置transpare…

Sass mixin 使用css border属性画三角形

To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #000, $fillColor:#fff) {    width: 0;     height: 0;    position: relative;    z-index: 0;    border-left: #{setTriangleSize($direction, "left", $s…

CSS相关，手画三角形，正方形，扇形

三角形 实现一个三角形 <!DOCTYPE html> <html> <head> <title>三角形</title> <style type="text/css"> .box1, .box2, .box3, .box4 { height: 0px; width: 0px; float: left; border-style: solid; margin: 10px; } .box1 { /* 等腰直角 */ b…

CSS之border绘制三角形

用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px solid orange; } 得到的效果如下: 因为我们一般设的border-width都很小,导致很多童鞋以为border是四个矩形,然而其实并不是,我们把content的宽度变小,border-width增大,并涂上不同的颜…

css画三角形原理解析

<div id="div1"></div><div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div><div id="div6"></div&…

用CSS的border画三角形

用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个边框同时设置宽度时,四个边最后在元素的中心汇成一个点. 因此当我们给一个有宽高的元素设置border时,四个边框的衔接方式是以对角线形式,而不是直角拼接,如图: 所以不设置宽高,给四个边框分别设置不同的颜色时就可以得到4个不同颜色不同方向的三角形: 想得到一个三角形的时候,不能单独设置一个边框,只设…

css中border画三角形

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name=&qu…