如何利用border书写三角形，建议考虑正方形
网页做三角形图片，你还在拿ps调整吗？out了，老铁，来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成，然后我想保留上边的三角形，那下边、左边、右边的三角形就没了（设置背景色transparent或者与背景相近的颜色），最终结果就是一个保留上边，方向朝下的三角形，需要注意一点的是设置的css样式中width=0，如果不是就不能构成正方形，而是一个梯形；此外还可以通HTML实体里的三角形符号，朝上▲朝下▼朝左◄朝右►，最后通过font的大小颜色控制三角形！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>怎样不用图片来做一个三角形图标</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* .box1,.box2,.box3,.box4{
font-size: 66px;
color: lightcoral;
cursor: pointer;
} *//*HTML实体里的三角形符号*/
.box{
width: 0px;
border-left: 100px solid red;
border-right: 100px solid yellow;
border-top: 100px solid green;
border-bottom: 100px solid #000;
}/*四个三角形构成一个正方形，想要哪个边另外三边transparent*/
.box{
width: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid red;
border-bottom: 100px solid transparent;
}
.triangle1{
width: 0px;
border: 100px solid yellow;
border-top-color:transparent;
border-left-color: transparent;
border-right-color: transparent;
}
/*需要多大的三角形就设置相应像素的border值，然后将其中三个方向的边框颜色设置为透明或者将边框颜色设置为与背景相同的颜色即可*/
</style>
</head>
<body>
<!-- 方法一 -->
<div class="box1">▲</div>
<div class="box2">▼</div>
<div class="box3">◄</div>
<div class="box4">►</div>
<!-- 方法二 -->
<div class="box"></div> <div class="triangle1"></div>
</body>
</html>
如果想了解更多纯CSS写三角形-border法，建议参考下小平头~ 与mumu42(后续有时间再补全该页面border书写三角形的方法)
如何利用border书写三角形，建议考虑正方形的更多相关文章
- 利用Border画三角形
边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- CSS学习笔记：利用border绘制三角形
在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...
- css 利用border 绘制三角形. triangle
1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS深入了解border：利用border画三角形等图形
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...
- 【前端小技巧】利用border画三角形及梯形
border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...
- 利用border和伪类画出三角形 ps：好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
- border绘制三角形
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 使用border做三角形
网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...
随机推荐
- 根据指定路由生成URL |Generating a URL from a Specific Route | 在视图中生成输出URL|高级路由特性
后面Length=5 是怎么出现的?
- linux C++类中成员变量和函数的使用
1.undefined reference to XXX 问题原因 1)XXX所在的so库等未指定 2)XXX在类中实现的时候没有加上类::函数的格式 2. was not declared in t ...
- CSS-02-css的三种基础选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- mysql--->mysql慢查询
简介 > 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能 参数及命令说明 查看慢查询是否开启和日志存储地址 show var ...
- 痞子衡嵌入式：嵌入式里堆栈原理及其纯C实现
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里堆栈原理及其纯C实现. 今天给大家分享的这篇还是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.栈这种结构在嵌入式 ...
- ElasticSearch快速入门
知识储备 学习ElasticSearch之前可以先了解一下lucene,这里是我整理的一篇关于lucene的笔记(传送门),对搜索框架有兴趣的还可以了解一下另一款企业级搜索应用服务器---solr(传 ...
- SOAP与REST API的爱恨情仇
之前一直想写些RESTful相关的文章,却一直未付诸行动.直到最近接手一个新的项目,对这块重新温习,乘此机会写些相关帖子.欢迎大家评论留言,如有错漏之处,也望各位大佬不令赐教. 话不多说,干活顶上. ...
- 隐马尔可夫(HMM)/感知机/条件随机场(CRF)----词性标注
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 7. 词性标注 7.1 词性标注概述 什么是词性 在语言学上,词性(Par-Of- ...
- 八使用Shell函数
在Shell脚本中,将一些需要重复使用的操作,定义为公共的语句块,即可称为函数 使用函数的好处? 使脚本代码更简洁,增强易读性 提高Shell脚本的执行效率 函数定义方法 基本格式1 function ...
- java架构之路-（netty专题）netty的基本使用和netty聊天室
上次回顾: 上次博客,我们主要说了我们的IO模型,BIO同步阻塞,NIO同步非阻塞,AIO基于NIO二次封装的异步非阻塞,最重要的就是我们的NIO,脑海中应该有NIO的模型图. Netty概念: Ne ...