css 中border的三角形

2024-10-30

用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

通过CSS的border绘制三角形

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

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制作各种形状

css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0: 设置border的高度为0:如图最后设置左右border的颜色为透明,如下图: 贴代码,做个小三角形 <style> .border{ width:; height:; border-bottom:100px solid red; border-left:50px solid trans

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 利用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和outline的区别

border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline-color:#ccc; 可以简写为:outline:1ox solid #ccc; 2者的用法相似,但是border是会占据盒子模型的大小,而outline是一个轮廓,不会占据盒子模型的大小.

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

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

原来css中的border还可以这样玩

原来css中的border还可以这样玩前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样

css中的border还可以这样玩

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样我们就可以得到一个圆形的效果,代码如下: html代

关于css中的border

我一直以为css中的border是正方形的像这样因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来当我给每一个边分别设置颜色的时候才发现他们是以梯形分布的,border中的top right bottom left 是以梯形显示的,如果此时你给div设置宽高为0的话他们就变成三角形了

css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: html部分: <body> <h6>边框的构成</h6> <div class="bodrShape1"></div> <div class="bodrShape2"></div> <

CSS中的margin、border、padding区别

CSS padding margin border属性详解图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin

CSS学习笔记：利用border绘制三角形

在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { width: 200px; height: 200px; -webkit-box-sizing:border-box; box-sizing:border-box; border-top: 50px solid #f00; border-left: 50px solid #ff0; border-bott

【基础】在css中绘制三角形及相关应用

简言本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景.利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案. 1 基本原理在CSS中,我们可以利用border-top.border-left.border-bottom.border-left四个属性来绘制三角形.实现的基本原理参见下面的演示代码及其运行结果. 核心代码: .box { width: 50px; height: 50px; border-to

[html]CSS中的margin、border、padding区别

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.

CSS中的margin、border和padding的区别

aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA

重温CSS：Border属性

边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头.幸运的是,我们能放下PS图象处理软件了. 基础你可能很熟悉边的最基本用法. 1 border: 1px solid black; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. 1 2 3 border-widt

谈谈css中的before和after

css中的伪元素before和after,其实有很多小的妙用. 一.基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容. <p> love </p> <style> //添加文字 p:before{ content:"I"; } p:after { content:"you"; } //添加图片 p:before { content: url(logo.gif) ; }

css 中border的三角形

热门专题