css实现三角形（上下左右）@莫成尘

快来打我* 2022-12-27 11:00 181阅读 0赞

## 先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。 ##

##### 如您满意请给莫成尘点个Fabulous #####

![css绘制三角形][css]

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title></title>
    	<style type="text/css">
    		.div1 { 
    		    width: 0px;
    		    height: 0px;
    		    border: 50px solid; /* border的宽度决定了三角形的大小 */
    			border-color: transparent; /* 设置border为透明 */
    		    border-top-color: red; /* 仅设置上方border显示 其他类似 */
    		}
    		.div2 { 
    		    width: 0px;
    		    height: 0px;
    		    border: 50px solid;
    			border-color: transparent;
    		    border-right-color: red;
    		}
    		.div3 { 
    		    width: 0px;
    		    height: 0px;
    		    border: 50px solid;
    			border-color: transparent;
    		    border-bottom-color: red;
    		}
    		.div4 { 
    		    width: 0px;
    		    height: 0px;
    		    border: 50px solid;
    			border-color: transparent;
    		    border-left-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="div1"></div>
    	<div class="div2"></div>
    	<div class="div3"></div>
    	<div class="div4"></div>
    </body>
    </html>

#### 附加和可能出现的有用信息已添加注释 ####

[css]: /images/20221120/eb4b2d9070234a4dacc4d704c4cf92f3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

港控/mmm°/ 2023年10月18日 13:36/ 0 赞/ 115 阅读

相关 css实现--三角形/箭头（上下左右）--详细原理

纯css实现上下左右箭头一直以为箭头知识引入的icon标签，直到实习才知道原来纯CSS是都可以实现的实现效果在这里插入代码片![在这里插入图片描述][20

柔光的暖阳◎/ 2023年01月12日 04:18/ 0 赞/ 333 阅读

相关 css实现三角形（上下左右）@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。如您满意请给莫成尘点个Fabulous ![css绘制三角形]

快来打我*/ 2022年12月27日 11:00/ 0 赞/ 182 阅读

相关在Uniapp微信小程序中使用vantweapp@莫成尘

有时候我们发现，在uniapp中使用vantweapp的时候，vant官方的案例并不能帮助我们在uniapp中使用vant。如您满意请给莫成尘点个star（以下链接点

布满荆棘的人生/ 2022年12月18日 07:57/ 0 赞/ 287 阅读

相关前端css文字单行和两行超出变为省略号解决方案@莫成尘

先看代码，复制使用即可，css样式在本身提供的特别多的能力，但我仍以为很多前端开发者并不精深于研究css，这里提供一个超出隐藏的demo，让您可以很轻松应对。（您将看到以下效

小灰灰/ 2022年12月11日 09:09/ 0 赞/ 101 阅读

相关 uniapp生态UI框架选择之uView（@莫成尘）

市场上的uni-ui框架有很多，都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的，接下来给您推荐uView（不仅仅是UI库也是一个js库

港控/mmm°/ 2022年12月02日 00:45/ 0 赞/ 316 阅读

相关自定义滚动条@莫成尘

先看代码，复制使用即可，以下代码均可复制粘贴使用（我将以注释的形式解释代码左右，您将看到以下效果）。原生的滚动条比较方正，不够圆滑，很大程度上不能满足我们的审美，有时候需要修

你的名字/ 2022年11月01日 10:50/ 0 赞/ 148 阅读

相关 js对数据进行加密（账户密码加密）@莫成尘

先看代码，复制使用即可。这是一个比较常用的场景我们借助了（crypto-es==>vue3）（crypto-es==>vue2）库。如您满意请给莫成尘点个star

川长思鸟来/ 2022年10月29日 01:44/ 0 赞/ 49 阅读

相关 CSS3实现左右摆动和上下滑动

1、上下滑动 award { position: absolute; top:

秒速五厘米/ 2021年11月05日 13:28/ 0 赞/ 647 阅读

相关 css3特效（上下左右晃动效果）

css3特效（上下左右晃动效果）

朱雀/ 2021年04月13日 17:27/ 1 赞/ 2081 阅读