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

快来打我* 2022-12-27 11:00 153阅读 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 条评论，153人围观）

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

相关阅读

相关上下左右手势

-(void)viewDidLoad{ UISwipeGestureRecognizer recognizer; recogniz

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

相关 css-图片左右上下居中自适应大小

![1021765-20190729163529052-1974909361.png][] html <a><img src="images/share/PHOTO

小灰灰/ 2023年08月17日 15:47/ 0 赞/ 112 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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