使用border的三角形原理实现

2024-10-08

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

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

利用border制作三角形原理

网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码: 1 2 3 4 5 6 width:100px; height:100px; border-top: solid 100px blue; border-left: solid 100px black; border-right: solid 100px yellow; border-bottom

CSS用border绘制三角形

使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

用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

html border画三角形

最近遇到了问题就是画推进条类似于

如何利用border书写三角形，建议考虑正方形

网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparent或者与背景相近的颜色),最终结果就是一个保留上边,方向朝下的三角形,需要注意一点的是设置的css样式中width=0,如果不是就不能构成正方形,而是一个梯形:此外还可以通HTML实体里的三角形符号,朝上▲ padding: 0; } /* .box1,.box2,.box3,.box4{ font

border实现三角形的原理

前言:网上最普遍的实现三角形的方法,就是通过控制border来实现,那为什么可以呢? 原理我们先来看看border的表现形式. #box{ width:100px; height:100px; background:yellow; border-top: 20px solid red; border-right:20px solid black; border-bottom:20px solid green; border-left:20px solid blue; } 观察上图可以发现,bo

CSS 制作三角形原理剖析

使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .triangle{ width: 200px; height: 200px; border: solid 40px red; } 不错,这里显示是一个正方形,如下

css绘制三角形原理

1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height;/*将宽高都设置为0*/ width; border:100px

CSS3画三角形原理

1.首先看一下画出一个下三角形完整的代码及效果图 #trangle1-up{ width:; height:; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid blue; } <div id="trangle1-up"> </div> chrome截图 2.接下来看一下原理首先我们知道: #test{ width

border绘制三角形

(1)有边框的三角形我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

css 利用border 绘制三角形. triangle

1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局css以及辅助css</title> <style type="text/css"> /***1: 初始样式设置*******/ html, body, ul, li, ol, dl, dd, dt, p

CSS深入了解border：利用border画三角形等图形

三角形实际上是border的产物我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色那么你就会发现,三角来了~! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3三角形画法</title> <style> .content{ width: 0px; height:

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绘制三角形

通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ; ; border-color: transparent; border-width: 1rem; border-style: solid; } 在上面的css基础上,添加下面的组合代码,将可以控制三角形的方向: border-left-color: #000; border-right-col

使用border做三角形

网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100

利用Border画三角形

边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-color:red;} div.b{ width:0px; height:0px; border:5px white solid; border-left-color:red;} 效果如下:

css border实现三角形

实现过程: 正常的border <div class="box"></div> .box { background: #ddd; width: 100px; height: 100px; border-top: 20px solid yellow; border-right: 20px solid red; border-bottom: 20px solid black; border-left: 20px solid blue; } 高度和宽度减小后的bord

用border实现三角形的过程

div{ width:100px; height:100px; background:yellow; border-top: 20px solid red; border-right:20px solid black; border-bottom:20px solid green; border-left:20px solid blue; } 观察上图可以发现,border表现为梯形.当减小box的宽高时,会发生如下变化: 从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边

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增大,并涂上不同的颜

使用border的三角形原理实现

热门专题