网页开发中经常遇到一些很小的三角形修饰，提示框箭头方向等问题，下面记录下自己开发过程中用到的一些css样式。 一、用css实现小三角形效果 提到小三角形，很多人可能直接使用图片，使用图片的缺点就是要调
CSS3实现三角形实例：<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
原创
2015-10-15 10:50:40
616阅读
三角形属于常见的几何图形，在网页设计中应用较为广泛。在网页编程中除了采用图片来实现前端展现外，纯CSS也可以实现三角形绘制。
1、基于border-width方案
基于border-width绘制三角形是“一门传统手艺”，由于该属性浏览器的支持性非常好，几乎没有兼容性问题，主流的三角形绘制方案都是采用基于border-width属性来实现的。
转载
2023-06-07 10:04:47
417阅读
话不多说，下面介绍两种比较常用的写法：一、border边框宽和高都设置为0px，通过border的交点创建三角形，这应该是使用的最多的一种写法。.triangle{
width: 0;
height: 0;
border: 100px solid;
border-color: red green blue orange;
} 效果图如下：好了，四个小三角已经初见雏形了，只需要稍做
range;}<body><div class="arrow"><...
原创
2021-07-27 17:57:29
348阅读
效果图：源代码：<!DOCTYPE html><html lang="en"><head> <
原创
2022-11-18 19:06:36
94阅读
案例-三角形（CSS3）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF\
原创
2022-10-20 10:06:39
36阅读
把div的高宽都设置为0；利用border来实现纯css的三角形要是倒三角，则有border-top没有botton 左右border都不要；如width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: transparent;
border-top-color: #fff;（但是在css6下会有黑色背景，其
原创
2013-11-15 10:34:56
905阅读
display: inline-block; border-right: 2px solid #E4E4E4; border-bottom: 2px solid #E4E4E4; width: 10px; height: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
原创
2022-01-16 11:03:27
2002阅读
display: inline-block; border-right: 2px solid #E4E4E4; border-bottom: 2px solid #E4E4E4; width: 10px; height: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
原创
2021-09-03 15:25:41
1610阅读
li.downloadApp:hover::after { content: ''; border: 8px solid white; position: absolute; top: 33px; margin: auto; left: 0; right: 0; width: 0; border-t ...
转载
2021-08-23 08:02:00
921阅读
2评论
1、谢尔宾斯基三角形谢尔宾斯基三角形(Sierpinski triangle),是一种如图所示的分形这里分析一下其绘制过程1、绘制一个三角形2、取三角形的三边中点，以每两个中点及其所在边共有的顶点，三个一组，组合成三个小三角形，对三个三角形进行绘制，如下图所示，分别为ADF，DBE，FEC。3、对2中的三个小三角形，重复步骤2。理论上，步骤二可以无限重复下去，但是代码而言，要保证算法的有穷性，所以
转载
2023-08-05 15:10:09
0阅读
以前看到过一个问题：谢尔宾斯基三角形能用编程写出来么？该怎么写？ - 知乎，在回答里，各方大神用各种语言各种方法实现了一遍，非常精彩。我当时也回答了这个问题，是用H5的Canvas实现的。这在前端技术上没什么难度，主要是算法比较有可玩性，所以当时就手痒了。谢尔宾斯基三角形是分形图形的一种，大概很多人第一次见到它都是在中学教科书上。它长这样： 我用了两种方法构造它：直接绘制三角
转载
2023-07-21 17:13:27
59阅读
div { width: 0; height: 0; border-width: 0 40px 40px; border-style: solid
原创
2022-10-21 09:08:29
327阅读
3评论
三角形：height:0;width:0;border:6pxsolidtransparent;border-left:6pxsolid#f00;display:block;
原创
2020-06-04 17:47:33
649阅读
