1、无边框的
html:
<div class="main">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="main2">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
css:
<style>
*{
margin: 0;
padding: 0;
}
.main,.main2{
width: 120px;
display: inline-block;
font-size: 14px;
color: #333;
line-height: 28px;
background: #F0981C;
position: relative;
padding: 10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
}
/*左三角*/
.main:before{
content: ' ';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid #F0981C;
position: absolute;
top: 15px;
left: -12px;
}
/*右三角*/
.main:after{
content: ' ';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #F0981C;
position: absolute;
bottom: 15px;
right: -12px;
}
/*上三角*/
.main2:before{
content: ' ';
border-bottom: 8px solid #F0981C;
border-left: 8px solid transparent;
border-right: 12px solid transparent;
position: absolute;
top: -8px;
left: 20px;
}
/*下三角*/
.main2:after{
content: ' ';
border-top: 8px solid #F0981C;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
bottom: -8px;
right: 20px;
}
</style>
效果如下:
2、有边框的
html:
<div class="main">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="main2">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="main3">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
<div class="main4">
<p>这是内容这是内容这是内容这是内容这是内容这是内容</p>
</div>
css:
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 20px;
}
.main,.main2,.main3,.main4{
width: 120px;
padding: 10px;
font-size: 14px;
color: #333;
line-height: 28px;
background: #F0981C;
border: 2px solid #FF0000;
position: relative;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
display: inline-block;
}
/*左三角*/
.main:before,.main:after{
content: ' ';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid #FF0000;
position: absolute;
top: 15px;
left: -12px;
}
.main:after{
border-right: 12px solid #F0981C;
left: -8px;
}
/*右三角*/
.main2:before,.main2:after{
content: ' ';
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #FF0000;
position: absolute;
top: 15px;
right: -12px;
}
.main2:after{
border-left: 12px solid #F0981C;
right: -8px;
}
/*上三角*/
.main3:before,.main3:after{
content: ' ';
border-bottom: 12px solid #FF0000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
top: -12px;
left: 20px;
}
.main3:after{
border-bottom: 12px solid #F0981C;
top: -9px;
}
/*下三角*/
.main4:before,.main4:after{
content: ' ';
border-top: 12px solid #FF0000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
bottom: -12px;
right: 20px;
}
.main4:after{
border-top: 12px solid #F0981C;
bottom: -9px;
}
</style>
效果如下: