A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 gz_xudada 于 2018-3-16 17:40 编辑

使用cssborder属性实现三角形

1. border使用方法
2. border 三角形

2.1. 三角形原理,我们来看一个普通的底部边框
2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线
2.3. 我们在左边边添加一个边框
2.4. 试想一下,我们把左右边框变成了透明的,是怎么样的呢?

已经变成了梯形了啊,我们怎么样把她变成三角形呢?
2.5. 我们把宽度高度设置为0
一个向上三角形已经出现了啊
以上代码有简写方式:
2.6. 除了向上三角形,还有向下,向左,向右三角形




5 个回复

倒序浏览
学习了!
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
空心三角形咋做呢?
回复 使用道具 举报
gz_phper 发表于 2018-3-16 19:29
空心三角形咋做呢?

空心用css实现比较麻烦,需要用到css3的伪类选择器before和after还要结合transform旋转一定的角度以及定位
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>网页标题</title>
	<meta name="keywords" content="关键字列表" />
	<meta name="description" content="网页描述" />
	<link rel="stylesheet" type="text/css" href="" />
	<style type="text/css">
		div{
			width:100px;
			height:2px;
			border-bottom:2px solid red;
			margin:100px auto;
			position:relative;
		}
		div:before{
			content:'';
			display:block;
			width:65px;
			height:2px;
			border-bottom:2px solid red;
			transform:rotate(-45deg);
			transform-origin:left top;
		}
		div:after{
			content:'';
			display:block;
			width:65px;
			height:2px;
			border-bottom:2px solid red;
			transform: rotate(45deg);
			transform-origin: right top;
			position:absolute;
			right:0;
		}
	</style>
	<script type="text/javascript"></script>
</head>
<body>
	<div></div>
</body>
</html>
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马