如何使用css画出一个倒立的三角形？

最新推荐文章于 2024-06-14 21:21:15 发布
最新推荐文章于 2024-06-14 21:21:15 发布
阅读量939 收藏 3
点赞数
分类专栏： 面试 css 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ni15534789894/article/details/114232399
版权 
		.nabla{
			//这个浮动是答主为了跟前面的div在一片显示设置的，与画三角无关
			float: left;
			//画三角把这个div的宽高都设置为0，
			假如你要画的是朝下的三角，那么你就把border-top 设置颜色，
			然后将其他三个方向设置为透明就可以了。
			width: 0px;
			height: 0px;
			border-top:200px solid crimson;
			border-bottom: 200px solid transparent;
			border-left: 200px solid transparent;
			border-right: 200px solid transparent;
		}
	</style>
</head>
<body>
	<div class="demo">
		<div class="app">

		</div>
	</div>

	<div class="nabla">

	</div>
</body>
</html>
小倪有点菜
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css倒三角的几种实现方式
weixin_44143001的博客
01-17 1108
1.BASE64编码 图片 假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。 有用的工具 http://webcodertools.com/imagetobase64converter http://image2base64.wemakesites.net/ 优点 你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码 缺点 你需要...
CSS画出各种三角形如等边三角形
09-25
在CSS世界中，绘制图形可能看似复杂，但通过巧妙利用边框、透明度以及几何原理，我们可以轻松地创建出各种形状，包括等边三角形。本文将深入探讨如何使用CSS来绘制三角形，并特别关注等边三角形的实现方法。 首先，...
倒立三角形css
ss515896745的博客
01-10 1060
modules\group-buy-all\group-buy-center\index.vue
CSS绘制三角形的方法
最新发布
Cc040909的博客
06-14 485
通过设置 border-left 和 border-right 为透明，border-bottom 为实色，就可以得到一个倒三角形的形状。1、50% 0 表示第一个顶点的 x 坐标为 50%(相对于元素的宽度)，y 坐标为 0%(相对于元素的高度)。这个点位于元素的顶部中心。3、100% 100% 表示第三个顶点的 x 坐标为 100%(元素的最右侧)，y 坐标为 100%(元素的底部)。2、0 100% 表示第二个顶点的 x 坐标为 0%(元素的最左侧)，y 坐标为 100%(元素的底部)。
纯css绘制一个倒置的正三角
可达鸭的博客
03-27 293
<body> <div class="triangle"> </div> </body> <style> .triangle { border-left: 23px solid transparent; border-right: 23px solid transparent; border-bottom: 40px solid lightblue; width: 0px; height: 0px; ..
倒立三角形
二月鸟
08-02 949
include
css+div实现倒三角
q893668680的博客
11-01 428
主要原理，width和height设置成0；然后设置边框，只展示上边框，会呈现一个正三角形。然后如果需要拉伸比例，可设置transform，根据需要拉伸x或者y方向。经常遇到类似信息框，需要一个倒三角，本文是纯css实现方式。
用CSS画一个带阴影的三角形的示例代码
01-19
怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和...
使用css画三角形的方法代码
09-25
使用css画三角形的方法代码，大家参考使用吧，下面还有一个兼容IE6的代码
css小技巧——实现一个倒三角的小图标
qq_43852612的博客
07-15 822
使用css巧妙实现一些实用的小技巧。
使用css画倒三角
weixin_44304454的博客
05-04 113
HTML部分： css部分： .f1 { width: 0px; height: 0px; margin: 100px auto; transform: rotate(0); border: 50px solid transparent; border-top: 50px solid black; transition: all linear 0.5s; } .f1:hover { transform: rotate(180deg);} ...
css 倒三角形 CSS 打造(此处有更多内容)的倒三角显示效果
12-13
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px; /*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/
csss实现三角形（倒三角、左右侧边倒三角等）
weixin_45663697的博客
04-27 646
通过下面这张图你就知道三角是怎么做的了，做法如下： <style> .box{ width: 0px; height: 0px; border-left: 30px solid pink; border-right: 30px solid red; border-top: 30px solid green; border-bottom: 30px solid black;
css实现三角形
xiaheader
02-20 978
今天给大家带来 CSS 三角形绘制方法 代码如下: #triangle-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid r
css绘制倒三角和正三角
逆风优雅的博客
03-12 569
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #redOne { width: 0; height: 0; border-left: 10px solid transp..
纯css 实现 三角形效果
刺心的博客
06-24 281
纯css 实现 三角形效果 1，首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘方块’ <html> <!--方块的样式--> <style> .box{ width:20px; height:20px; background...
css实现倒三角的最简单方法
热门推荐
Amouzy的博客
09-07 1万+
css实现倒三角的最简单方法 1. css边框： html <div class="h"></div> css: .h{ width: 0px; height: 0px; border: 50px solid transparent; border-top-color: red; } 最终呈现结果： 如果想要其它方向的三角，很简单，直接改成border-left-color，border-right-color或者border-bottom-c
用css实现一个点击展开内容的小效果 （css三角形点击切换倒三角）
鹏仔工作室的秘密基地
02-01 6806
原文http://www.sharedblog.cn/?post=64 CSS代码 &lt;style type="text/css"&gt; .box{ width: 280px; background: pink; margin: 30px; border: 2px solid black; } a{ text-decoration: none; ...
css实现倒三角
qq_47793359的博客
04-28 2506
<div class="uptriangle"></div> <style> .uptriangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; position: absolute; right: 37..
html+css画出一个三角形
09-04
### 回答1： 我可以用 HTML 和 CSS 画出一个三角形：<div style="width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000;"></div> ### 回答2： HTML和CSS都是用于网页设计和布局的标记语言。要绘制一个三角形，我们可以使用CSS的伪元素和一些基本的样式属性来实现。 首先，在HTML文件中创建一个`<div>`元素，我们将其作为容器来绘制三角形。 ```html <div class="triangle"></div> ``` 接下来，在CSS文件中，我们使用伪元素`:after`添加一个子元素，并使用`content`属性来设置其内容为空。 ```css .triangle:after { content: ""; } ``` 然后，我们使用`border`属性将子元素的边框样式设置为透明，并设置上边框为一个较大的值，例如20px。 ```css .triangle:after { content: ""; border: 20px solid transparent; border-top-width: 0; } ``` 最后，我们设置子元素的边框颜色为我们想要的颜色，例如红色。 ```css .triangle:after { content: ""; border: 20px solid transparent; border-top-width: 0; border-bottom-color: red; } ``` 现在我们已经完成了三角形的绘制。你可以通过调整容器的大小、设置边框颜色和大小，来自定义你想要的三角形。 ```html <div class="triangle"></div> ``` ```css .triangle:after { content: ""; border: 20px solid transparent; border-top-width: 0; border-bottom-color: red; } ``` 这样，你就可以使用HTML和CSS来画出一个简单的三角形了。 ### 回答3： 要用HTML和CSS画出一个三角形，可以使用CSS的边框属性(border)以及宽度(width)和高度(height)来实现。 HTML: ``` <div class="triangle"></div> ``` CSS: ``` .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } ``` 在上述代码中，我们创建了一个`<div>`元素并给它添加了一个类名为"triangle"的CSS类。然后，我们使用CSS属性来定义这个div元素的样式。通过设置元素的宽度(width)和高度(height)为0，我们使其为一个空白元素。接下来，我们使用border属性来定义边框的样式。通过设置左边框(border-left)和右边框(border-right)为透明色，我们创建了一个等腰三角形的形状。最后，设置底部边框(border-bottom)的颜色为红色，并指定其高度为100px，我们得到了一个红色的三角形。 通过以上HTML和CSS代码的结合，我们可以成功使用HTML和CSS画出一个三角形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值