<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.arrow{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 100px; /*//与padding、margin属性类似，顺序为上、右、下、左 */
border-color: red blue orange gray; /*//顺序为上、右、下、左} */
}
.arrow_left {
display:inline-block;
width:0;
height:0;
border-bottom:100px solid transparent;/* 设置透明色*/
border-top:100px solid transparent;
border-right:100px solid transparent;
border-left:100px solid gray;
}
.arrow_right{
display: inline-block;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid #6c6;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
.arrow_top{
display: inline-block;
width: 0;
height: 0;
border-top: 100px solid #6c6;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}
.arrow_bottom{
display: inline-block;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #6c6;
border-left: 100px solid transparent;
}
.sanjiao{width: 100px;height: 200px;background: #6c6;position: absolute;margin-left: 500px}
.sanjiao:after{
content: "";
position: absolute;
display:inline-block;
width:0;height:0;
border-bottom:100px solid transparent;/* 设置透明色*/
border-top:100px solid transparent;
border-right:100px solid transparent;
border-left:100px solid #6c6;
margin-left: 100px;
}
.sanjiao:before{
content: "";
position: absolute;
display:inline-block;
width:0;height:0;
border-bottom:100px solid transparent;/* 设置透明色*/
border-top:100px solid transparent;
border-right:100px solid #6c6;
border-left:100px solid transparent;
margin-left: -200px;
}
.a{ height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 #3366ff transparent transparent;
border-style:solid solid dashed dashed;
border-width:300px 300px 0 0 ;}
.org_box{
height:80px;
line-height:80px;
margin-bottom:30px;
padding-left:2em;
background:#F3961C;
position:relative;
}
.org_bot_cor{
width:0;
height:0;
font-size:0;
border-width:15px;
border-style:solid;
border-color:#f3961c transparent transparent;
overflow:hidden;
position:absolute;
left:60px;
bottom:-30px;
}
.test{width:200px; height:200px; border:100px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}
/*调整宽高*/
.test1_all{width:0; height:0; border-width:200px 100px; border-style:solid;
border-color: blue yellow red black;}
.test1_bottom{width:0; height:0; border-width:200px 100px; border-style:solid;
border-color:red #ffffff #ffffff #ffffff;}
.test1_top{width:0; height:0; border-width:200px 100px; border-style:solid;
border-color:#ffffff #ffffff red #ffffff;}
.test1_left{width:0; height:0; border-width:200px 100px; border-style:solid;
border-color:#ffffff red #ffffff #ffffff;}
.test1_right{width:0; height:0; border-width:200px 100px; border-style:solid;
border-color:#ffffff #ffffff #ffffff red;}
.test2{width:0; height:0; border-width:200px 100px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
/*气泡样式1*/
.test0{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test0 span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test0 span.bot{
border-width:20px;
border-style:solid;
border-color:#ffffff #beceeb #beceeb #ffffff;
left:-40px;
top:40px;
}
.test0 span.top{
border-width:10px 20px;
border-style:dashed solid solid dashed;
border-color:transparent #ffffff #ffffff transparent;
left:-40px;
top:60px;
}
/*气泡样式2*/
.test00{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test00 span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test00 span.bot{
border-width:20px;
border-style:solid dashed dashed;
border-color:#beceeb transparent transparent;
left:80px;
bottom:-40px;
}
.test00 span.top{
border-width:20px;
border-style:solid dashed dashed;
border-color:#ffffff transparent transparent;
left:80px;
bottom:-33px;
}
/*气泡样式3*/
.test000{
width:300px;
padding:80px 30px; /*调30调整宽*/
margin-left:100px;
background:#beceeb;
-webkit-border-top-left-radius:220px 120px;
-webkit-border-top-right-radius:220px 120px;
-webkit-border-bottom-right-radius:220px 120px;
-webkit-border-bottom-left-radius:220px 120px;
-moz-border-radius:220px / 120px;
border-radius:220px / 120px;
position:relative;
}
.test000 span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test000 span.bot{
width:30px;
height:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
left:10px;
bottom:-20px;
}
.test000 span.top{
width:15px;
height:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
left:0px;
bottom:-40px;
}
</style>
</head>
<body>
<div class="arrow">全部</div><br>
<div class="arrow_left">左三角</div><br>
<div class="arrow_right">右三角</div><br>
<div class="arrow_top">下三角</div><br>
<div class="arrow_bottom">上三角</div><br>
<div class="sanjiao"></div><br>
<div class="a"></div><br>
<div class="org_box">
<span class="org_bot_cor"></span>
边框法实现底部90度尖角对话框
</div><br>
<div class="test">梯形</div><br>
<div class="test1_all">调整宽高</div><br>
<div class="test1_bottom"></div>
<div class="test1_top"></div><br>
<div class="test1_left"></div><br>
<div class="test1_right"></div><br>
<div class="test2">半三角</div><br>
<div class="test0">
<span class="bot"></span>
<span class="top"></span>
效果一
</div><br>
<div class="test00">
<span class="bot"></span>
<span class="top"></span>
效果二
</div><br>
<div class="test000">
<span class="bot"></span>
<span class="top"></span>
效果三
</div><br>
</body>
</html>
