怎么用css控制border成为三角形
布局div,并命名id="tri",用CSS来控制div,在style里面,使用border属性对div进行控制,
#tri{
width: 0px;
height: 0px;
border-top: 400px solid red;
border-right: 400px solid blue;
border-bottom: 400px solid green;
border-left: 400px solid yellow;
}
【注意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。
上述代码画的还不是三角形,但是是四个三角,只要将border周边的颜色变成白色就可以了,例如除了border-bottom: 100px solid green;其余全变为white,就会看到如下效果,当然你也可以根据自己需要来调整。
此外可以将border-top的像素设为0;其余两边也调小一点并且颜色设为白色,就会只看到底下的一个三角形了。
【注意】根据自己实际来挑选自己想要达到的效果。图一图二效果不同,就是border设定不同的原因。
https://zhidao.baidu.com/question/426723710833528812.html
网站上经常会使用一些三角形,除了图片的方式,实际上利用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 100px blue;
}
通过demo可以看到border的相交的地方在45deg平分,当元素的width、和height属性呗设置为0的时候
.t1{margin:30px;height:0px;width:0px;border-top:solid 100px red;border-left:solid 100px green;border-right:solid 100px orange;border-bottom:solid 100px blue;
}
这样我们就可以看到三角形了,尝试一下去掉两个边框,值保留上边和左边
.t2{margin:30px;height:0px;width:0px;border-top:solid 100px red;border-left:solid 100px green;
}
这时候做三角形好像简单了,只要我们保留两个相邻边,把另外的一个设置为透明就可以了
.t3{margin:30px;height:0px;width:0px;border-top:solid 100px red;border-right:solid 100px rgba(0,0,0,0);
}
这样我们就有一个直角三角形了,稍微修改一下
.t4{margin:30px;height:0px;width:0px;border-top:solid 90px red;border-left:solid 200px rgba(0,0,0,0);
}
这样做等腰直角三角形也简单了,保留相邻的三个边,两个设置为透明就行了
.t5{margin:30px;height:0px;width:0px;border-top:solid 200px red;border-left:solid 200px rgba(0,0,0,0); border-right:solid 200px rgba(0,0,0,0);
}
再稍微调整一下,还可以做出各种形状
.t6{margin:30px;height:0px;width:0px;border-left:solid 100px green;border-top:solid 100px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0);
}
.t7{margin:30px;height:0px;width:0px;border-left:solid 200px green;border-top:solid 80px rgba(0,0,0,0); border-bottom:solid 80px rgba(0,0,0,0);
}
.t8{margin:30px;height:0px;width:0px;border-left:solid 100px green;border-top:solid 200px rgba(0,0,0,0); border-bottom:solid 100px rgba(0,0,0,0);
}
https://www.cnblogs.com/dolphinX/p/4068894.html
怎么用css控制border成为三角形相关推荐
- 【css】巧用border制作三角形
#css用border制作三角形 1.利用CSS盒模型 盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角 调整宽高大小可以调节三角形形 ...
- CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
- css实现各种各样的三角形
css实现各种各样的三角形 1. border三角形 2. linear-gradient 三角形 3.tramform+rotate 实现 4.canvas画图三角形 1. border三角形 设置 ...
- html中怎么设置页面的弧度,如何用css实现弧度圆角?三角形以及圆形
如何用css实现弧度圆角?三角形以及圆形 用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; ...
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
- CSS控制表格的方法
现在的网页都是DIV+CSS来布局的,table布局时代早已经结束了,那table还能干什么呢? 当然是现实数据了,这才是他的本事! 表格框架要和CSS分离,还table纯结构,需要琢磨一下,下面是一 ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
- net中 css 控制 GridView 样式
net中 css 控制 GridView 样式 .GridViewStyle { border-right: 2px solid #A7A6AA; border-bottom: ...
最新文章
- Ubuntu 安装 ffmpeg
- tomcat 远程管理(入门级)
- Flex开发实战(一)--Flex的详细介绍
- php curl_multi_close,PHP curl_multi_close函数
- 解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
- Kotlin入门(19)Android的基础布局
- SQL时间格式化 转载备用~
- Visual Studio 2010 - 推荐的扩展[关闭]
- 54份运算放大器书籍、文档资料合集(54份 0.46G)
- 金庸的武侠世界和SAP的江湖
- C++调用libVLC播放视频
- 爬虫实战 ——百度翻译
- 一些基本的灰度变换函数
- android添加adb命令行,Android—adb命令
- keil创建无启动文件及自定义.sct文件的工程
- cocos creator开发攀爬类游戏
- 生成基于STM32f103zet6的宠物自动投食机的代码,实现定时、定量、自动的投食,并可以通过Tlink物联网平台控制投食机投喂食物和查看投食机的投喂状态...
- Python 3语法小记(四)字典 dictionary
- 本地存储(Local Storage) 和 会话存储(Session Storage)
- php 面试,PHP 经典面试题集
热门文章
- C++ 获得指定路径文件的“修改日期”
- 在archlinux上搭建twitter storm cluster
- LeetCode第九题—— Palindrome Number(判断回文数)
- Ubuntu:安装deb文件包
- 【博客美化】评论带头像,且支持旋转
- HTML5原生拖拽/拖放 Drag Drop 详解
- JavaScript_BOM_window
- char s[0] do{}while(0)
- CuteEditor 4.0.7研究
- Centos7 防火墙 firewalld 实用操作