css绘制向左三角形_CSS绘制三角形—border法
1. 实现一个简单的三角形
使用CSS盒模型中的border(边框)即可实现如下所示的三角形:
CSS实现简单三角形
实现原理:
首先来看在为元素添加border时,border的样子;假设有如下代码:
div {
width: 50px;
height: 50px;
border: 2px solid orange;
}
效果图:
border的一般使用
这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。
然而事实并不是这样。实际上,元素的border是由三角形组合而成,为了说明这个问题,我们可以增大border的宽度,并为各border边设置不同的颜色:
div {
width: 50px;
height: 50px;
border: 40px solid;
border-color: orange blue red green;
}
效果图:
border的形成方式
既然如此,那么更进一步,把元素的内容尺寸设置为0会发生什么情况呢?
div {
width: 0;
height: 0;
border: 40px solid;
border-color: orange blue red green;
}
效果图:
元素内容尺寸为0
我们将惊奇地发现,此时元素由上下左右4个三角形“拼接”而成;那么,为了实现最终的效果,即保留最下方的三角形,还应该怎么做?很简单,我们只需要把其它border边的颜色设置为白色或透明色:
div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}
最终效果
Duang~ 最终的简单三角形就绘制出来了。同理,如果想要得到其它边上的三角形,只需要将剩余的border边颜色设置为白色或透明色即可。
不过,被“隐藏”的上border仍然占据着空间,要想使得绘制出的三角形尺寸最小化,还需要将上border的宽度设置为0(其它情况同理):
div {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
2. 实现带边框的三角形
带边框的三角形是指为三角形添加其它颜色的边框,如同为元素添加border一样:
带边框的三角形
由于不能继续通过为已有三角形设置border的方法来为其设置边框(因为三角形本身就是利用border实现的),所以只好另想办法。而能想到的一个最自然的方法就是三角形叠放,即把当前三角形叠放在更大的三角形上方,上图所示的实现方法就是把黄色三角形放在了尺寸更大的蓝色三角形上。
为了实现这样的效果,需要利用绝对定位方法:
首先定义出外面的蓝色三角形:
#blue {
position:relative;
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent blue;
}
效果为:
外围蓝色三角形
随后需要定义黄色三角形,由于黄色三角形的定位需要参考蓝色三角形的位置,所以需要用到绝对定位方法。为此还需要将黄色三角形作为蓝色三角形的子元素。一个可行的办法是在蓝色三角形内部定义一个额外的标签以表示黄色三角形,但为了节约标签起见,更好的办法是使用伪元素:
#blue:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0px;
left: 0px;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到的效果为:
定义黄色三角形
需要特别注意此时定义出的黄色三角形与蓝色三角形之间位置的偏移关系,该偏移将受到top、left(本例中)以及黄色三角形本身border宽度的共同影响。
可能会有这样的疑问:为什么黄色三角形会向左偏移一段距离呢,按道理不应该完全重合在蓝色三角形上吗,就像下面这样?
黄色三角形与蓝色三角形完全重合
如果有这样的疑问,说明还没有对绝对定位产生足够的认识。绝对定位的区域是基于绝对定位父元素的padding区域,然后在此基础上运用top、left、right、bottom等一系列属性来约束绝对定位子元素的位置。在本例中,由于蓝色三角形作为绝对定位父元素,其内容的尺寸为0,则内容区域就是该三角形的上顶点:
绝对定位区域
对于黄色三角形,由于设置了left: 0和top: 0,所以黄色三角形的所有内容(包括border、margin)将根据蓝色三角形的上顶点进行定位。可以把此时left: 0和top: 0分别看作是两面“隔墙”——即上隔墙和左隔墙,黄色三角形的所有内容只能在上隔墙的下方和左隔墙的右方区域。
由于黄色三角形的内容区域也位于其顶点处,且对其设置了左右各40px的border,所以黄色三角形的内容区域将向右偏移40px,从而形成了之前的效果。
想想看将黄色三角形的位置设置为left: 0和bottom: 0,会得到怎样的定位效果?(下图所示)
黄色三角形设置为left: 0和bottom: 0
搞懂了绝对定位后,只需要在原代码上稍作修改就可以将黄色三角形的顶点与蓝色三角形顶点相重合,同时还应该适当缩小黄色三角形的尺寸(按相似三角形等比例缩小):
#blue:after {
content: "";
position: absolute;
top: 0px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到:
黄色三角形与蓝色三角形顶点重合
在上面的代码中,特意删除了之前对width: 0和height: 0的设置,因为子元素具有position:absolute设置,这会使得元素尺寸在不显式设置宽度和高度的情况下,收缩到元素内容的尺寸,由于内容设置的是content: "",所以子元素的尺寸默认也就是0了。故设置width: 0和height: 0就变得多余了。
最后一步就是利用top将黄色三角形向下移动至合适的位置:
#blue:after {
content: "";
position: absolute;
top: 1px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent yellow;
}
得到最终效果:
最终效果
学会了带边框三角形的绘制,那么实现类似如下三角形箭头自然也是不在话下了:
三角形箭头
实现代码:
#blue:after {
content: "";
position: absolute;
top: 2px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent #fff;
}
3. 绘制其它角度的三角形
绘制其它角度的三角形,如:
右直角三角
或者:
左直角三角
就更简单了,其实它们都是基于之前绘制的三角形而来的。如果想绘制右直角三角,则将左border设置为0;如果想绘制左直角三角,将右border设置为0即可(其它情况同理)。
css绘制向左三角形_CSS绘制三角形—border法相关推荐
- html直角三角形怎么实现,CSS绘制三角形的实现代码(border法)
1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下代码 ...
- IOS开发—IOS绘制圆,直线,弧线,矩形,扇形,三角形,贝塞尔等图形
一.绘制圆,直线,弧线,矩形,扇形,三角形,贝塞尔等图形 //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画CGContextRef context = UIGrap ...
- Java实现三角形图案绘制**
Java实现三角形图案绘制** Java实现如下图形: / / * / * * * * * * * * import java.util.Scanner; public class Xingxing ...
- 利用matlab绘制简单IFS图形(Sierpinski三角形和BarnsleyFern巴恩斯利蕨)
利用matlab绘制简单IFS图形(Sierpinski谢尔宾斯基三角形和BarnsleyFern巴恩斯利蕨) 一.SierpinskiTriangle谢尔宾斯基三角形 谢尔宾斯基三角形(英语:Sie ...
- 小练手:用Canvas绘制谢尔宾斯基三角形
转载<小练手:用Canvas绘制谢尔宾斯基三角形> 补充 作者第二种画法的完整程序: PS:修改function SierpinskiTriangle(p,len,depth = 9)中d ...
- OsgDelaunay三角网绘制及其如何限制生成的三角形
主要参考资料: <OpenSceneGraph三维渲染引擎编程指南>肖鹏 刘更代 徐明亮 清华大学出版社 文章目录 前言 一.如何生成三角网 二.实现 1.约束 2.整体代码 总结 前言 ...
- [Slimdx]顶点和索引缓冲,绘制了2个分离的三角形
定义网格顶点和索引缓冲,绘制了2个分离的三角形. 1 using System; 2 using System.Drawing; 3 using RGeos.SlimScene.Core; 4 usi ...
- css 百分比 怎么固定正方形_css样式写出三角形,宽高自适应的正方形,扇形!...
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <! 实现它的原理那就要弄明白border属性, border是一个复合属性 borde ...
- 前端怎么画三角形_css如何画三角形?
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的.下面本篇文章就来给大家介绍一下使用css如何画三角形的方法,希望 ...
最新文章
- vue3 封装文件上传组件
- C#与mongoDB初始环境搭建
- mysql中的内置函数
- Android Studio 4.1一键生成代码Template
- 常用测试工具-----XCAP
- 哪些服务器适合使用固态硬盘,服务器用固态硬盘还是机械硬盘合适?
- GitLab(三)创建用户
- Color---颜色对照表
- HTML5 新特性: Web Worker 的创建与使用(webpack + TS 环境)
- 用PS为背景图片添加文字抠图
- IC 短缺的影响超出汽车领域
- arcgis导入坐标点转面_点数据转成Arcgis线、面文件
- Windows10 64位系统设置FRPC开机自动启动
- 十、生产者消费者问题
- WEB、WEB标准、W3C的理解
- batch批处理文件(一)——batch概念以及echo off
- oracle索引介绍之位图(bitmap)索引
- [算法课]全面翻新计划!第十二周全解
- python万里长征2(非教)
- 麦子学院自动化测试-selenium视频教程