css如何将div画成三角形
首先了解一下盒模型:
先看一段代码:
#div1{
height: 100px;
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: red forestgreen blue cyan;
width: 100px;
}
根据代码渲染,显示效果如下(边框颜色border-color四个值默认的加载方向,top right bottom left):
根据css代码,边框的宽度都是100px,div高度和宽度也是100px,但是这个和三角形有什么关联吗?
不急再看一个图,我们把div宽度和高度设置为0。
css代码:
#div1{
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: red forestgreen blue cyan;
width: 0px;
height: 0px;
}
浏览器就渲染出如下图片:
咦,每个边都是三角形? (可以试试只把div高宽其中一个设置为0,另一个100px)
既然有三角形了,下面就好办了。比如我要蓝色的三角形,把其它三个边颜色都去掉不就可以了嘛:
#div1{
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: transparent transparent blue transparent;
width: 0px;
height: 0px;
}
蓝色三角形不就得到了。
审查元素一看,问题就出来了:
虽然其它三个边都隐藏了,位置还在,怎么把多余的位置去掉呢?
试着修改下边框的宽度(宽度值对应:top right bottom left):
先把boder-width第一个值改为50px试试:
#div1{
border-style: solid;
border-width: 50px 100px 100px 100px;
border-color: transparent transparent blue transparent;
width: 0px;
height: 0px;
}
修改前:修改后:
发现上面多余的地方少了一半,设置border-width第一个值为0px试试:
#div1{
border-style: solid;
border-width: 0px 100px 100px 100px;
border-color: transparent transparent blue transparent;
width: 0px;
height: 0px;
}
查看元素已经完全是三角形的高度了
至此三角形就完成了。
那想其它三角形,应该怎么办?
再看下上面的图:
就以蓝色的三角形为例,它的高度,就是css中设置的100px。那它的底边的长度和其它两个边的长度怎么来的呢?
哈哈,问的跟个小学生题一样。
蓝色三角形(bottom)其实从它的顶点垂直下来一条线为准,将蓝色三角形分为左右两个小三角形,左边小三角形底边受left值影响,右边小三角形底边受right值影响。
其它一样:
top最长边=left值+right值=200px
left最长边=top值+bottom值=200px
明白以上关系,就能随便绘制什么三角形了,如将蓝色三角形渲染为直角三角形(还是以上面代码为例):
#div1{
border-style: solid;
border-width: 0px 0px 100px 100px;
border-color: transparent transparent blue transparent;
width: 0px;
height: 0px;
}
css如何将div画成三角形的更多相关文章
- div css 伪类 不固定图片大小 居中, css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- 用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
- CSS实现带阴影效果的三角形
具体实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- DIV+CSS常见问题:DIV如何设置一个像素高度?
CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...
- CSS布局:div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
随机推荐
- Visual Format Language(VFL)视图约束
约束(Constraint)在IOS编程中非常重要,这关乎到用户的直接体验问题. IOS中视图约束有几种方式,常见的是在IB中通过Pin的方式手动添加约束,菜单Editor->Pin->. ...
- 如何用Qt Python创建简单的桌面条形码应用
Qt for Python可以快速跨平台的GUI应用.这篇文章分享下如何结合Dynamsoft Barcode Reader SDK来创建一个简单的读码应用. 安装Qt for Python 官方站点 ...
- URAL1519:Formula 1——题解
http://acm.timus.ru/problem.aspx?space=1&num=1519 https://vjudge.net/problem/URAL-1519 题目大意:给一个网 ...
- P3932 浮游大陆的68号岛 【线段树】
P3932 浮游大陆的68号岛 有一天小妖精们又在做游戏.这个游戏是这样的. 妖精仓库的储物点可以看做在一个数轴上.每一个储物点会有一些东西,同时他们之间存在距离. 每次他们会选出一个小妖精,然后剩下 ...
- ls乱码问题解决
http://note.youdao.com/noteshare?id=c7ff510525b4dadaabb6f6a0a72040cc
- C++实现人员信息管理系统模拟
利用C++语言实现基本的学生信息管理系统: 要求: 1-设置管理员密码 2-人员数据有:姓名,性别等基本的信息 3-可以添加,删除,保存,统计 #include<iostream> #in ...
- [大数据可视化]-saiku的源码包Bulid常见问题和jar包
最近在做kylin+mondrian+saiku的二次开发的时候,Bulid saiku的源码出现了很多问题,基本上一大部分问题jar找不到问题,很多jar国内网站都找不到.这时候只有手动下载然后注册 ...
- [机器学习]-PCA数据降维:从代码到原理的深入解析
&*&:2017/6/16update,最近几天发现阅读这篇文章的朋友比较多,自己阅读发现,部分内容出现了问题,进行了更新. 一.什么是PCA:摘用一下百度百科的解释 PCA(Prin ...
- Bootstrap自学笔记
<!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...
- ItemCF_基于物品的协同过滤
ItemCF_基于物品的协同过滤 1. 概念 2. 原理 如何给用户推荐? 给用户推荐他没有买过的物品--103 3. java代码实现思路 数据集: 第一步:构建物品的同现矩阵 第 ...