文档章节

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
博文 89
码字总数 34075
作品 0
css实现toolTip

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

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

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

深海鱼在掘金
2017/11/23
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

没有更多内容

加载失败,请刷新页面

加载更多

首个智能运维项目开源!腾讯织云Metis,用算法替代人为指定规则

10月20日,腾讯织云Metis 智能运维学件平台在OSCAR开源先锋日上宣布,正式对外开源。Metis 是AIOps(Algorithmic IT Operations),即智能运维领域的首个开源产品。智能运维主张通过算法从海...

腾讯开源
7分钟前
0
0
Java面试170题

1、面向对象的特征有哪些方面? 2、访问修饰符public,private,protected,以及不写(默认)时的区别? 3、String 是最基本的数据类型吗? 4、float f=3.4;是否正确? 5、short s1 = 1; s1 = ...

lanyu96
8分钟前
0
0
利用Ant脚本生成war包

使用ant脚本前的准备 1、下载一个ant安装包。如:apache-ant-1.8.4-bin.zip。解压到E盘。 2、配置环境变量。新增ANT_HOME:E:\apache-ant-1.8.4;PATH增加:E:\apache-ant-1.8.4\bin。 3、检...

狼王黄师傅
11分钟前
0
0
优雅的写出类

前言 虽然现在已经是ES6的时代,但是,还是有必要了解下ES5是怎么写一个类的。 本文详述JavaScript面向对象编程中的类写法,并分步骤讲述如何写出优雅的类。 一、例子 例子为一个轻提示组件T...

peakedness丶
13分钟前
0
0
Python基础案例教程

一、超市买薯片 # 用户输入薯片的单价danjia = float(input("薯片的单价"))# 用户输入购买袋数daishu = int(input("购买的袋数"))# 计算总价zongjia = danjia * daishu# 输出结果...

linuxprobe16
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部