CSS用border绘制三角形
来源:互联网 发布:淘宝网络红人 编辑:程序博客网 时间:2024/06/07 13:45
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形。这样不借助图片,可以直接绘制出三角形了。
一个栗子:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow;}</style></head><body><div id="triangle"></div></body></html>
效果:
如果设置了块的宽高,还是会呈现边线的效果,每个边线将会是一个等腰梯形,类似于相框:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:100px; width:100px; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow;}</style></head><body><div id="triangle"></div></body></html>
效果:
利用这个原理,可以绘制不同形状的三角形,例如菜单上常用的右方向等腰直角三角形:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-top:solid 100px rgba(0,0,0,0); border-left:solid 100px purple; border-bottom:solid 100px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html>
another one:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-right:solid 100px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 100px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html>
图:
再来一个:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#triangle{ height:0; width:0; border-right:solid 50px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 50px rgba(0,0,0,0);}</style></head><body><div id="triangle"></div></body></html>
图图:
也可以使用css绘制三角形边线:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>border</title><style> .border{ position:relative; } .border:after,.border:before{ content:''; display:block; position:absolute; border-style:solid; border-width:20px; } .border:before{ border-color:transparent transparent #333 transparent; left:20px; top:42px; } .border:after{ border-color:transparent transparent #fff transparent; left:20px; top:45px }</style></head> <body> <div class="border"></div> </body></html>
阅读全文
0 0
- CSS用border绘制三角形
- border的妙用:纯CSS绘制三角形
- #学习笔记#(43)CSS-border绘制三角形
- border属性绘制三角形
- 用css绘制三角形
- 用CSS border相关属性画三角形
- 用css的border属性画三角形
- CSS border实现三角形
- css border 画三角形
- CSS border实现三角形
- CSS border实现三角形
- css之border&三角形
- HTML border CSS输出三角形
- css的border实现三角形
- css控制border画三角形
- 利用Css--border设计三角形
- 用CSS画三角形,纯CSS绘制三角形的代码
- 结合整理的css用border画三角形的原理
- mysql检索数据
- 排序算法(二):快速,归并,堆排序
- git命令
- Java虚拟机之内存管理
- 文章标题
- CSS用border绘制三角形
- Python 二维字典更新
- Linux下简单的线程池
- 崭新印通拼版软件(ImageHarbor)下载 v6.0官方免费版
- 欢迎使用CSDN-markdown编辑器
- SQL操作表
- Jenkins Pipeline 系列—02 为什么选Pipeline
- Ext.data.Store 改成POST请求
- 数组与矩阵---在数组中找到一个局部最小的位置