css - 三角形的制作

女爷i 2021-09-29 14:46 361阅读 0赞

在我们写项目的时候会时不时的遇到需要一个三角形，这时会选择直接拿一张图片来代替，或者自己用css样式来画一个三角形，下面我来跟大家解释一下如何使用css样式来制作一个三角形：  
1、三角形代码：  
   HTML代码：

<div class="body">
    			  <div class="box">
    			    <div class="triangle"></div>
    			  </div>
    			</div>

css代码：

body{
    			 	 background:skyblue;
    			}
    			.box {
    			  	 margin:100px;
    			}
    			.triangle {
    				  width: 0px;
    				  height: 0px;
    				  border-left: 30px solid transparent;   // 设置左边框
    				  border-right: 0px solid transparent; 	// 设置右边框
    				  border-bottom: 0px solid red;	//  设置下边框
    				  background-color: rgba(127,127,127,0);  // 背景颜色（直接设置为透明色）
    				  border-bottom-width: 30px;  // 设置下边框的长度
    			}

2、运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/b4f37841236c46f79f6a49b98cc64fec.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css画三角形(怎么用css画三角形)

如何用css3画一个有边框的三角形如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属

素颜马尾好姑娘i/ 2023年09月26日 13:10/ 0 赞/ 66 阅读

相关 CSS 三角形的制作

三角形的制作代码： <!DOCTYPE html> <html lang="en"> <head>

港控/mmm°/ 2022年12月29日 14:20/ 0 赞/ 199 阅读

相关 Css3制作三角形图标

在建站过程中，有时候需要给部分容器添加装饰效果，这样就会添加小图标，今天和大家分享用Css3制作三角形图标。在Css3之前，我们使用transparent属性来实现背景颜色

布满荆棘的人生/ 2022年12月04日 08:44/ 0 赞/ 236 阅读

相关 css 三角形

css 三角形 transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值 <!DOCTYPE html>

ゝ一纸荒年。/ 2022年11月27日 07:11/ 0 赞/ 196 阅读

相关 html制作三角形图片素材,纯css代码如何制作透明三角形

css实现下图样式，具体像素值记不住了，很好设置，html code (2014百度秋招面试题)： ![b469c24d0ad24849585d103d26715ff5.pn

亦凉/ 2022年10月06日 07:54/ 0 赞/ 205 阅读

相关 css画三角形

给块级标签设置样式即可上三角 width: 0; height: 0; border-left: 50px solid tran

痛定思痛。/ 2022年06月09日 02:14/ 0 赞/ 263 阅读

相关 css三角形

今天给大家带来 CSS 三角形绘制方法 ![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1][] \triangle-up

深藏阁楼爱情的钟/ 2022年06月05日 07:27/ 0 赞/ 252 阅读

相关 css用border属性制作三角形

css用border制作三角形在css中，我们可以用边框制作一个三角形代码如下： <!DOCTYPE html> <html lang="en">

àì夳堔傛蜴生んèń/ 2022年05月20日 10:07/ 0 赞/ 240 阅读

相关 css制作三角形

css制作三角形 .menu { position: fixed; top: 15upx; right: 10upx;

待我称王封你为后i/ 2022年01月26日 12:45/ 0 赞/ 308 阅读

相关 css - 三角形的制作

在我们写项目的时候会时不时的遇到需要一个三角形，这时会选择直接拿一张图片来代替，或者自己用css样式来画一个三角形，下面我来跟大家解释一下如何使用css样式来制作一个三角形

女爷i/ 2021年09月29日 14:46/ 0 赞/ 362 阅读