文档章节

css 三角形

爱喝水的小熊
 爱喝水的小熊
发布于 07/17 18:15
字数 511
阅读 2
收藏 0

1.无边框三角形

条件:width,height设置为0,border-width设置一定的宽度,border-color保留一边有颜色其他三边设置透明

.triangle{
    width:0px;
    height:0px;
    border-width:40px;
    border-style: solid;
	border-color: #FF7F24 transparent transparent transparent;
}

效果:

2.有边框三角形

由于我们写三角形的时候用到的就是border,所以给三角形添加边框就不能再用border属性了,我们就使用元素覆盖,设置大小不一样的边框,大的在下面,这就用到position:absolute,

//html
<div class="triangle-border">
	<div class="triangle"></div>
</div>

//css
.triangle{
	position:absolute;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
	border-width:40px;
    border-style: solid;
	border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}
.triangle-border{
    position:relative;
	width:0px;
    height:0px;
    border-width:42px;
    border-style: solid;
    border-color: #FF7F24 #EEC900 #E066FF #90EE90;;
}

效果如下:

绝对定位并没有覆盖到父元素上,因为我们的三角形是边,而不是真正的内容区域,绝对定位(position:absolute),是根据相对定位父层内容的边界计算的。由于父元素div内容为空,content的内容在中心,所以子元素是根据中心点来定位的,我们知道这个原理,微调下子元素的定位即可,然后把父元素的边框颜色设置为边框色

.triangle{
    position:absolute;
	left:-40px;//修改这行
	top:-40px;//修改这行
	width:0px;
	height:0px;
	border-width:40px;
	border-style: solid;
	border-color: #FF7F24 #EEC900 #E066FF #90EE90;
}
.triangle-border{
	position:relative;
    width:0px;
    height:0px;
    border-width:42px;
    border-style: solid;
    border-color: #333;//修改颜色
}

效果如下:

然后隐藏父元素,子元素其他三个边就可以

<!DOCTYPE html>
<html>
	<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>img</title>
		<style>
		    html,body{
		        width: 100%;
		        height: 100%;
		        padding:0;
		        margin:0;
		    }
		    /*border-color: #FF7F24 #EEC900 #E066FF #90EE90;*/
		    .triangle{
		        position:absolute;
		        left:-40px;
		        top:-41px;
		        width:0px;
		        height:0px;
		        border-width:40px;
		        border-style: solid;
		        border-color: #FF7F24 transparent transparent transparent;
		    }
		    .triangle-border{
		        position:relative;
		        width:0px;
                height:0px;
                border-width:42px;
                border-style: solid;
                border-color: #333 transparent transparent transparent;
		    }
		</style>
	</head>
	<body>
	    <div id="main">
	        <div class="triangle-border">
	            <div class="triangle"></div>
	        </div>
	    </div>
	    <script>
	    </script>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
爱喝水的小熊
粉丝 4
博文 91
码字总数 34075
作品 0
私信 提问
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar
2017/09/27
0
0
border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金
10/30
0
0
css实现三角形

工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。 假设我们...

tiancai啊呆
01/10
0
0
【CSS】画三角形

270924-106.jpg 用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。 image.png HTML代码: CSS代码: image.png HTML代码: CSS代码: ...

KelvinZ
2017/11/27
0
0
【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十
04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网易免费企业邮箱配置客户端

网易免费企业邮箱客户端(pop、imap、smtp)权限默认开启,对应服务器地址为: 发件服务器: SMTP:smtp.ym.163.com 默认端口为:25 (如勾选ssl安全链接,端口号为994) 收件服务器: POP3...

柴高八斗之父
2分钟前
0
0
Hanlp在ubuntu中的使用方法介绍

HanLP的一个很大的好处是离线开源工具包,换而言之,它不仅提供免费的代码免费下载,而且将辛苦收集的词典也对外公开啦,此诚乃一大无私之举.我在安装的时候,主要参照这份博客: blog.csd...

左手的倒影
6分钟前
0
0
软件架构的案例(架构学习九)

阿里 liunx+php+apache+mysql(淘宝网成立)->oracle(淘宝旺旺、支付宝)->java1.0(EJB、Mysql)->java2.0(Spring、JBoss、)->java3.0->分布式时代...

zzx10
6分钟前
1
0
用9种办法解决 JS 闭包经典面试题之 for 循环取 i

闭包 正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function ...

Jack088
9分钟前
0
0
Yearning基于Inception的开源SQL审核平台

基础环境: python3 nodejs vuejs mysql python-ldap pymysql mysql 新建数据库 create database Yearning DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; Navicat导入初始化数据 : ......

以谁为师
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部