纯css画三角形/梯形（兼容ie6）

最新推荐文章于 2019-06-26 12:01:03 发布

shitouPlus

最新推荐文章于 2019-06-26 12:01:03 发布

阅读量1.1k

点赞数

分类专栏： HTML CSS 文章标签： HTML css 三角形

本文链接：https://blog.csdn.net/shitouPlus/article/details/46944967

版权

CSS 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

HTML

18 篇文章 0 订阅

订阅专栏

代码很简单也很容易理解，及用css盒模型来实现效果

实例：宽高为0的话是三角形，否则是梯形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.triangle{
			width: 0;
			height: 0;
			border-style: solid;
			border-color: red transparent transparent transparent;
			border-width: 12px;
		}
		.trapezoidal{
			width: 12px;
			height: 12px;
			border-style: solid;
			border-color: green transparent transparent transparent;
			border-width: 12px;
		}
	</style>
</head>
<body>
	<div class="triangle"></div>
	<div class="trapezoidal"></div>
</body>
</html>

效果：

当然也可以把另外三遍设为 *背景色*来实现效果，也可以尝试下把三边设为不同的颜色，宽度效果也很炫酷

为了兼容ie6，border-style和font-size,line-height，overflow都要改下

#test {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid dashed dashed dashed;/*ie6不支持颜色透明，可将边框设为dotted或dashed*/
    border-width:20px;
}

效果同上

更通用的，不用考虑兼容性的写法，用字符实现三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.box{
    height:80px;
width: 300px;
    line-height:80px; 
border-radius: 10px;
    margin-bottom:30px; 
    padding-left:2em;
    background:#f3961c; 
    position:relative; 
}
.diamond{
    height:60px;
    line-height:60px; 
    font-size:60px; 
    color:#f3961c; 
    position:absolute; 
    z-index: -1;
    left:60px; 
    bottom:-30px;
}
</style>
</head>
<body>
	<div class="box">
    <span class="diamond">◆</span>
    字符法实现底部90度尖角对话框
</div>
</body>
</html>

效果：

气泡框实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			position: relative;
			width: 100px;
			height: 60px;
			line-height: 60px;
			background: blue;
			border-radius: 5px;
		}
		.box:after{
			content: "";
			width: 0;
			overflow: hidden;
			border-style: solid;
			border-color: blue transparent transparent transparent;
			position: absolute;
			bottom: -32px;
			right: 20px;
			border-width: 12px 6px 20px 18px;
		}
	</style>
</head>
<body>
	<div class="box">
	hellow word!
	</div>
</div>
</body>
</html>

效果：

参考文章http://caibaojian.com/css-border-triangle.html#t7

shitouPlus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css画三角形/梯形（兼容ie6）

代码很简单也很容易理解，及用css盒模型来实现效果实例：宽高为0的话是三角形，否则是梯形 Document .triangle{ width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-wid
复制链接

扫一扫