用CSS实现不同角度的三角形

最新推荐文章于 2023-04-16 16:09:02 发布
最新推荐文章于 2023-04-16 16:09:02 发布
阅读量500 收藏
点赞数
分类专栏： CSS WEB前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31635733/article/details/81707771
版权

第一部分：效果图预览

第二部分：如何实现的？

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>less匹配实现不同角度的三角形</title>
	<link rel="stylesheet" href="style/triangle.css">
</head>
<body>
	<h1>用CSS的匹配实现不同角度的三角形-不带边框</h1>
	<h3>上三角:</h3>
	<div class="triangle-content">
		<div class="triangle-top"></div>
	</div>

	<h3>下三角:</h3>
	<div class="triangle-content">
		<div class="triangle-bottom"></div>
	</div>

	<h3>左三角:</h3>
	<div class="triangle-content">
		<div class="triangle-left"></div>
	</div>

	<h3>右三角:</h3>
	<div class="triangle-content">
		<div class="triangle-right"></div>
	</div>
	

	<h3>左上三角:</h3>
	<div class="triangle-content">
		<div class="triangle-left-top"></div>
	</div>
	

	<h3>右下三角:</h3>
	<div class="triangle-content">
		<div class="triangle-right-bottom"></div>
	</div>
	
	<h3>右上三角:</h3>
	<div class="triangle-content">
		<div class="triangle-right-top"></div>
	</div>
	
	<h3>左下三角：</h3>
	<div class="triangle-content">
		<div class="triangle-left-bottom"></div>
	</div>
	<div class="cl clearfix"></div>


    <h1>用CSS的匹配实现不同角度的三角形-带边框</h1>
	<h3>上三角:</h3>
	<div class="triangle-content">
		<div class="triangle-top-border"></div>
		<div class="triangle-top1-border"></div>
	</div>

	<h3>下三角:</h3>
	<div class="triangle-content">
		<div class="triangle-bottom-border"></div>
		<div class="triangle-bottom1-border"></div>
	</div>

	<h3>左三角:</h3>
	<div class="triangle-content">
		<div class="triangle-left-border"></div>
		<div class="triangle-left1-border"></div>
	</div>

	<h3>右三角:</h3>
	<div class="triangle-content">
		<div class="triangle-right-border"></div>
		<div class="triangle-right1-border"></div>
	</div>
	

	<h3>左上三角:</h3>
	<div class="triangle-content">
		<div class="triangle-left-top-border"></div>
		<div class="triangle-left-top1-border"></div>
	</div>

	<h3>右下三角:</h3>
	<div class="triangle-content&
最低0.47元/天 解锁文章
大眼萌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现三角形.zip
03-06
这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...
CSS（盒模型）
simon_dg的博客
09-03 329
一、盒模型 一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”，是与其他盒子之间的距离
css实现小三角
peppa_pig的博客
11-12 798
下面代码想要实现这样的小三角 width: 0px; height: 0px; *width: 4px; *height: 4px; font-size: 0; line-height: 0; overflow: hidden; border-width: 4px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #236FBD; 这样写可以适应大多浏览器 ..
纯CSS制作三角形
qq_36291960的博客
10-16 280
1.锐角三角形 原理：将块元素分成四部分，然后需要哪边哪边solid，其他边均为transparent #demo { width: 0; height: 0; border: 10px solid transparent; border-left-color: red; } 上面的边框颜色顺序为上、右、下、左，然后如果想要哪一边保留的话，那么就让那一边出现颜色 2.直角三角形 总体上分成两块，需要哪两边，就把哪两边拿出来加上颜
css实现六角星
qq_39039128的博客
09-23 1250
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
圆滑描边 css,CSS描边原理及绘制三角形
weixin_42513387的博客
08-03 283
CSS 盒模型：其中，在上下左右的边框交界处，都形成了斜线，利用这一特性，我们可以通过设置不同的上下左右边框的宽度和颜色，可以得到小三角、小梯形等；调整宽度大小可以调节三角形的形状。示例 1我们首先尝试上下左右颜色区分，并将 border 的宽度给大一点，看看效果。div {height: 30px;width: 30px;border-width: 30px;border-style: soli...
CSS代码实现三角形和饼图
09-22
接下来，我们探讨如何用CSS实现饼图。饼图的构建基于圆形元素和旋转技术。首先，我们需要一个圆环形的容器，这可以通过设置元素的宽度、高度和`border-radius`属性为50%来实现。比如`.pie38` 类就创建了一个100px宽...
布局和排版教程 纯css3实现图片三角形排列
09-25
本教程将介绍如何使用纯CSS3实现图片的三角形排列，这种方法适用于展示一系列图片的情况。 首先，我们来理解一下“三角形排列”。这里所说的“三角形排列”并不是指图片本身形状为三角形，而是指图片在页面上的布局...
css实现三角形及应用示例
03-18
通过巧妙地利用边框、背景和定位，我们可以用纯CSS实现各种形状，其中包括三角形。本教程将深入探讨如何使用CSS来创建三角形以及它的应用实例。 首先，理解CSS创建三角形的基本原理至关重要。三角形是由三个直角边...
纯CSS实现单一div的正多边形变换
12-13
本文主要探讨如何仅使用CSS实现一个div从正三角形变为正八边形的变换，甚至通过动画效果形成正多边形的动态变换。这个技巧的关键在于巧妙运用边框宽度、div的宽高以及CSS的伪元素。 ### 正三角形 正三角形的创建...
纯CSS绘制三角形箭头效果
09-25
最近我想修改一下这个网站，我想在上面放置一个提示框。这是很容易，但我想让提示框上有一个三角形的箭头。可是，一想到这需要使用图片，并且各种颜色，各种方向的箭头要准备无数种，这几乎是一种灾难。幸运的是，MooTools的核心开发着Darren Waddell告诉了我一个非常棒
CSS三角形
小明的博客
04-16 169
三角形
CSS3画圆环、各种三角形、五角星
Dreammin的博客
03-23 2154
圆环效果： 实现步骤： 1、分析：它是由一个正方形通过border-radius属性转化为圆形的；空心可以由调大边框来实现。 代码如下： 先画出一个空心的正方形 div{ margin: 100px auto; width: 100px; height: 100px; border: 90px solid #00BFFF; } 2、利用border-...
CSS实现三角形的方法之一--利用 border 属性实现三角形
hl_java的专栏
04-12 2458
这个原理很简单，我我们先看下面的图，这是一个边框为 20px 的 div，看他的边框，是个梯形，变化会从这里开始。 CSS： .triangle{ width:30px; height:30px; border-width:20px; border-style:solid; border-color:#e66161 #f3bb5b #
html中小三角怎么打出来,css实现小三角（原理）
weixin_42561040的博客
06-05 1804
效果图如图1所示：(简单示范，有点丑，莫介意)PS:兼容IE，FF , chrome ,360安全浏览器先讲下原理吧，如图2所示：这个div的样式如下所示：div{width: 0px;height: 0px;border-width: 20px;border-style: solid;border-color: lightgreen pink yellow lightblue;}解释：当div的...
CSS实现气泡对话框
前端菜菜DayDayUp的博客
10-12 5221
气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示： 拆分来看，形如这种气泡框无外乎就是一个矩形框+ 一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。 第一步，首先要有个框！很简单，一个div就可以了，然后.
巧用css border
weixin_33882452的博客
06-27 90
上下左右边框交界处呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或颜色，可以得到小三角、梯形等。 调整宽度大小可以调节三角形形状。 实现三角形 示例1：   #test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; bo...
css3做各种角度三角形
03-15 5357
初学者，做笔记防止遗忘#triangle{ width:0; height:0; border-left: 50px solid transparent; /*50px为左顶点到上顶点的水平距离*/ border-right: 100px solid transparent ;/*100px为右顶点到上
纯正CSS绘制三角形（各种角度）
z983002710的博客
06-30 3319
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down { width: 0;
css实现三角形
最新发布
05-26
可以使用CSS的border属性来实现三角形。具体方法如下： 1. 先创建一个正方形的div元素，设置宽度和高度相等。 2. 设置border属性，将三条边的颜色设为透明，只设置一个边的颜色为需要的颜色，边框大小可以根据需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值